/* ============================================================
   Stochops. Design System — v1
   3 colors only: Deep Green / Gold / Pearl. No black anywhere.
   One typeface: IBM Plex Sans Arabic (AR + EN + logo).
   ============================================================ */
html{color-scheme:only light}
:root{
  color-scheme:only light;
  /* Green (the hero color) */
  --g-950:#07261F;
  --g-900:#0A332B;   /* ink: all primary text */
  --g-800:#0E4436;
  --g-700:#125944;   /* interactive green */
  --g-300:#9DBBAF;
  --g-150:#DCE8E1;
  --g-100:#E9F1EC;
  /* Gold */
  --gold:#DCAE3E;
  --gold-strong:#C09028;
  --gold-soft:#F7EED7;
  --gold-ink:#8F6A12;
  /* Pearl */
  --pearl:#F6F5F1;
  --white:#FFFFFF;
  --line:#E4E6DE;
  --muted:#54655D;   /* green-tinted gray, never black */

  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --shadow-sm:0 1px 2px rgba(10,51,43,.06);
  --shadow-md:0 2px 4px rgba(10,51,43,.05),0 12px 32px -12px rgba(10,51,43,.14);
  --shadow-lg:0 24px 60px -20px rgba(10,51,43,.25);
  --ease:cubic-bezier(.22,.8,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'IBM Plex Sans Arabic',system-ui,-apple-system,sans-serif;
  background:var(--pearl);color:var(--g-900);
  line-height:1.8;font-size:15.5px;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold-soft);color:var(--g-900)}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:embed}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
img,svg{display:block}
a{color:var(--g-700)}

/* ---------- language switching ---------- */
html[lang="ar"] .en{display:none!important}
html[lang="en"] .ar{display:none!important}
html[lang="en"] body{line-height:1.65}

/* ---------- logo ---------- */
.logo{font-weight:700;letter-spacing:-.03em;text-decoration:none;direction:ltr;unicode-bidi:embed;display:inline-block}
.logo b{font-weight:700;color:var(--gold)}
/* usage: <a class="logo">Stoch<b>ops.</b></a> */

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(246,245,241,.85);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-head .in{max-width:1080px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:22px}
.site-head .logo{font-size:21px;color:var(--g-900)}
.site-head nav{display:flex;gap:20px;font-size:14px;margin-inline-start:8px}
.site-head nav a{color:var(--muted);text-decoration:none;font-weight:500;padding:4px 2px;border-bottom:2px solid transparent;transition:color .18s var(--ease)}
.site-head nav a:hover{color:var(--g-900)}
.site-head nav a.on{color:var(--g-900);font-weight:700;border-bottom-color:var(--gold)}
.head-actions{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
@media(max-width:640px){.site-head nav{display:none}}

/* ---------- buttons (the system) ---------- */
.btn{
  appearance:none;border:0;cursor:pointer;text-decoration:none;
  font-family:inherit;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;white-space:nowrap;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn-lg{font-size:15px;padding:14px 30px}
.btn-md{font-size:14px;padding:11px 22px}
.btn-sm{font-size:12.5px;padding:8px 16px}

.btn-primary{background:var(--gold);color:var(--g-950)}
.btn-primary:hover{background:var(--gold-strong);transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(192,144,40,.55)}

.btn-secondary{background:transparent;color:var(--g-800);border:1.5px solid var(--g-300)}
.btn-secondary:hover{border-color:var(--g-700);background:var(--g-100);transform:translateY(-1px)}

.btn-ghost-dark{background:transparent;color:#F3F6F2;border:1.5px solid rgba(255,255,255,.45)}
.btn-ghost-dark:hover{border-color:var(--gold);color:var(--white)}

.btn-quiet{background:var(--white);color:var(--g-800);border:1.5px solid var(--line);box-shadow:var(--shadow-sm)}
.btn-quiet:hover{border-color:var(--g-300);transform:translateY(-1px)}

/* language pill */
.lang-btn{background:var(--white);border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--g-800);cursor:pointer;display:inline-flex;gap:6px;align-items:center;transition:border-color .16s var(--ease)}
.lang-btn:hover{border-color:var(--g-300)}
.lang-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.lang-btn .dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* ---------- hero ---------- */
.hero{padding:64px 0 72px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-40% -20% auto;height:130%;pointer-events:none;
  background:
    radial-gradient(560px 380px at 82% 18%,var(--g-100) 0%,transparent 65%),
    radial-gradient(480px 360px at 12% 82%,var(--gold-soft) 0%,transparent 60%);
  opacity:.9}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr}.hero{padding:44px 0 56px}}
.hero h1{font-size:clamp(30px,4.6vw,46px);font-weight:700;line-height:1.35;letter-spacing:-.015em}
html[lang="en"] .hero h1{line-height:1.18}
.hero h1 .hl{color:var(--g-700);position:relative}
.hero h1 .hl::after{content:"";position:absolute;inset-inline:0;bottom:.08em;height:.34em;background:var(--gold-soft);z-index:-1;border-radius:4px}
.hero .lede{color:var(--muted);font-size:16px;margin-top:16px;max-width:520px}
.hero .cta-row{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.trust{display:flex;gap:22px;margin-top:30px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.trust span{display:flex;align-items:center;gap:7px}
.trust i{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none}

/* ---------- sections ---------- */
section.band{padding:72px 0}
section.band+section.band{border-top:1px solid var(--line)}
.eyebrow{font-size:12.5px;font-weight:700;color:var(--gold-strong);letter-spacing:.04em;margin-bottom:8px}
h2.title{font-size:clamp(22px,3.2vw,30px);font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.sub{color:var(--muted);max-width:640px;font-size:15px}

/* ---------- cards ---------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
.card-hover{transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--g-150)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin-top:28px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}

.path-card{padding:30px 28px;text-decoration:none;color:var(--g-900);display:flex;flex-direction:column;min-height:230px}
.path-card .tagchip{align-self:flex-start;font-size:11.5px;font-weight:700;background:var(--g-100);color:var(--g-800);border-radius:999px;padding:4px 13px;margin-bottom:16px}
.path-card h3{font-size:20px;font-weight:700;margin-bottom:8px}
.path-card p{font-size:14px;color:var(--muted);flex:1}
.path-card .go{margin-top:18px;font-size:14px;font-weight:700;color:var(--g-700);display:flex;align-items:center;gap:6px}
.path-card:hover .go{color:var(--gold-strong)}
.path-card .go svg{transition:transform .2s var(--ease)}
html[lang="ar"] .path-card:hover .go svg{transform:translateX(-4px)}
html[lang="en"] .path-card:hover .go svg{transform:translateX(4px) scaleX(-1)}
html[lang="en"] .go svg{transform:scaleX(-1)}

/* ---------- forms ---------- */
.field{margin-bottom:16px}
.field>label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:700;margin-bottom:7px;gap:10px}
.field>label .s{font-weight:400;font-size:11.5px;color:var(--muted)}
.inbox{position:relative;display:block}
.inbox input{width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--white);font:inherit;font-weight:700;font-size:16px;padding:10px 14px;padding-inline-end:62px;min-width:0;color:var(--g-900);font-variant-numeric:tabular-nums;transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.inbox input:focus{outline:none;border-color:var(--g-700);box-shadow:0 0 0 3px var(--g-100)}
.inbox input::-webkit-outer-spin-button,.inbox input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inbox input[type=number]{-moz-appearance:textfield;appearance:textfield}
.inbox .u{position:absolute;inset-inline-end:1.5px;top:1.5px;bottom:1.5px;max-width:56px;display:flex;align-items:center;justify-content:center;padding:0 10px;font-size:11.5px;color:var(--muted);background:var(--pearl);border-inline-start:1px solid var(--line);border-start-end-radius:8.5px;border-end-end-radius:8.5px;pointer-events:none;white-space:nowrap;overflow:hidden}
input[type=range]{width:100%;margin-top:10px;accent-color:var(--g-700);height:20px;cursor:pointer}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:420px){.two{grid-template-columns:1fr}}
.seg{display:flex;border:1.5px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--white)}
.seg button{flex:1;border:0;background:none;font:inherit;font-size:12.5px;font-weight:700;padding:9px 6px;cursor:pointer;color:var(--muted);transition:background .16s,color .16s}
.seg button[aria-pressed="true"]{background:var(--g-800);color:var(--white)}
.seg button:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}

/* ---------- calculators ---------- */
.calc-grid{display:grid;grid-template-columns:minmax(310px,420px) 1fr;gap:20px;align-items:start;margin-top:26px}
@media(max-width:860px){.calc-grid{grid-template-columns:1fr}}
.card-h{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px}
.card-h h3{font-size:16px;font-weight:700}
.card-h .hint{font-size:11.5px;color:var(--muted)}
.card-b{padding:18px 22px 20px}
.hero-num{padding:22px 22px 18px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px 26px;align-items:flex-end}
.hero-num .big label{display:block;font-size:12px;color:var(--muted);font-weight:700;margin-bottom:2px}
.hero-num .big .v{font-weight:700;font-size:40px;line-height:1.1;color:var(--g-800);letter-spacing:-.02em}
.hero-num .big .v small{font-size:15px;font-weight:700;color:var(--muted);margin-inline-start:6px}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{border-radius:999px;padding:5px 14px;font-size:12.5px;font-weight:700;background:var(--gold-soft);color:var(--gold-strong);border:1px solid #EBDBB0}
.chip.green{background:var(--g-100);color:var(--g-800);border-color:var(--g-150)}
.chip.alert{background:var(--white);color:#9A4A1F;border-color:#E8C9B2}

.riyal{padding:18px 22px;border-bottom:1px solid var(--line)}
.riyal h4{font-size:13px;font-weight:700;margin-bottom:2px}
.riyal p{font-size:11.5px;color:var(--muted);margin-bottom:12px}
.bar{display:flex;height:32px;border-radius:9px;overflow:hidden;border:1px solid var(--line)}
.bar div{transition:width .4s var(--ease);min-width:0}
.b1{background:var(--g-700)}.b2{background:var(--gold)}.b3{background:var(--g-300)}.b4{background:var(--g-150)}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:12px}
.legend span{display:flex;align-items:center;gap:6px;color:var(--muted)}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.legend b{color:var(--g-900);font-variant-numeric:tabular-nums}

.rows{padding:8px 22px 14px}
.row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.row:last-child{border-bottom:0}
.row .k{color:var(--muted)}
.row .k .why{font-size:11px;display:block;color:var(--g-300)}
.row .v{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.row .v.gold{color:var(--gold-strong)}
.row.total .k,.row.total .v{font-weight:700;color:var(--g-800);font-size:14.5px}

.gauge{padding:16px 22px;border-top:1px solid var(--line)}
.gauge h4{font-size:13px;font-weight:700;display:flex;justify-content:space-between}
.g-track{height:9px;border-radius:99px;background:var(--g-150);margin-top:9px;position:relative;overflow:hidden}
.g-fill{height:100%;border-radius:99px;background:var(--g-700);transition:width .35s var(--ease),background .35s}
.g-fill.warn{background:var(--gold)}
.g-fill.over{background:#B0642F}
.g-mark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--gold-strong);opacity:.7}
.g-note{font-size:11.5px;color:var(--muted);margin-top:8px}

.notice{margin:16px 22px 20px;border-radius:var(--r-md);padding:13px 16px;font-size:13px;background:var(--gold-soft);border:1px solid #EBDBB0;color:#6B5314}
.notice b{color:#4E3C0A}
.notice.alert{background:#FBF3EC;border-color:#E8C9B2;color:#7C4A22}

/* ---------- FAQ ---------- */
details{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);margin-top:10px;box-shadow:var(--shadow-sm)}
summary{cursor:pointer;font-weight:700;font-size:14.5px;padding:16px 20px;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold-strong);font-weight:700;font-size:19px;line-height:1}
details[open] summary::after{content:"–"}
details .a{padding:0 20px 16px;font-size:14px;color:var(--muted)}

/* ---------- footer ---------- */
.site-foot{background:var(--g-950);color:#D3E2DA;font-size:13px;padding:36px 0;margin-top:56px}
.site-foot .wrap{display:grid;gap:10px}
.site-foot .logo{font-size:20px;color:var(--white)}
.site-foot .logo b{color:#E9C766}
.site-foot a{color:#E9C766;text-decoration:none;font-weight:700}
.site-foot a:hover{color:var(--white)}
.site-foot .links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.site-foot .links i{color:#3E5C51;font-style:normal}
.site-foot .fine{color:#A9BFB5;max-width:760px;line-height:1.9}

/* ---------- reveal motion ---------- */
.rv{opacity:0;transform:translateY(12px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .btn,.card-hover{transition:none}
  html{scroll-behavior:auto}
}

/* ---------- print / PDF ---------- */
#print-head{display:none}
.print-btn{margin-inline-start:auto}
.print-only{display:none}
@media print{
  @page{margin:13mm}
  body{background:var(--white)!important;font-size:12px}
  .site-head,.site-foot,.print-btn,input[type=range],.cta-row,.trust,nav{display:none!important}
  main,section.band{padding:0!important;border:0!important}
  .calc-grid{grid-template-columns:1fr!important;gap:10px!important;margin-top:0!important}
  .card{box-shadow:none!important;break-inside:avoid}
  section.no-print,.posts-band,.types-band{display:none!important}
  .panel{display:none!important}.panel.active{display:block!important}
  #print-head{display:flex!important;justify-content:space-between;align-items:flex-end;gap:16px;border-bottom:2.5px solid var(--g-800);padding-bottom:10px;margin-bottom:16px}
  #print-head .logo{font-size:26px;color:var(--g-900)}
  #print-head .meta{font-size:10.5px;color:var(--muted);line-height:1.6}
  html[lang="ar"] #print-head .meta{text-align:left}
  html[lang="en"] #print-head .meta{text-align:right}
  .print-only{display:block!important;font-size:10px;color:var(--muted);border-top:1px solid var(--line);margin:14px 22px 0;padding:8px 0 14px}
}

/* ============ Brex-anatomy additions ============ */
.announce{background:var(--gold-soft);color:#5C4A10;font-size:12.5px;text-align:center;padding:9px 16px;border-bottom:1px solid #EBDBB0}
.announce b{color:var(--gold-ink);font-weight:700}

.band-dark{background:var(--g-950);color:#EAF2ED;position:relative;overflow:hidden}
.band-dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 460px at 78% -10%,rgba(18,89,68,.55) 0%,transparent 60%),
             radial-gradient(700px 420px at 8% 110%,rgba(220,174,62,.10) 0%,transparent 55%)}
.band-dark>.wrap{position:relative}
.band-dark .title{color:#FFF}
.band-dark .sub{color:#B7CCC2}

.kicker{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-strong);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:22px;height:2px;background:var(--gold);border-radius:2px}
.band-dark .kicker{color:#E9C766}
.band-dark .kicker::before{background:#E9C766}

.display{font-size:clamp(32px,5.6vw,56px);line-height:1.3;font-weight:700;letter-spacing:-.02em}
html[lang="en"] .display{line-height:1.1;letter-spacing:-.03em}

.hero-stats{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:22px;font-size:14.5px;color:var(--muted);font-weight:500}
.hero-stats span{display:flex;align-items:center;gap:9px}
.hero-stats i{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.hero-stats b{color:var(--g-900)}
.band-dark .hero-stats{color:#C9DAD1}
.band-dark .hero-stats b{color:#FFF}

/* product frame ("screenshot" panel) */
.shot{background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:0 40px 90px -30px rgba(7,38,31,.5);overflow:hidden;color:var(--g-900)}
.shot .bar{display:flex;align-items:center;gap:6px;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--pearl)}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:var(--g-150)}
.shot .bar i:first-child{background:var(--gold)}
.shot .bar span{margin-inline-start:8px;font-size:11px;color:var(--muted);font-weight:700}
.shot .body{padding:20px}

/* volley (alternating media/text) */
.volley{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:34px 0}
.volley+.volley{border-top:1px solid var(--line)}
.volley.rev .media{order:-1}
@media(max-width:860px){.volley{grid-template-columns:1fr;gap:26px}.volley.rev .media{order:0}}
.volley h3{font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.015em;margin-bottom:10px}
.volley .lede{color:var(--muted);font-size:15px;margin-bottom:18px}
.vlist{list-style:none;display:grid;gap:12px;margin-bottom:22px}
.vlist li{display:flex;gap:12px;font-size:14.5px;color:#2C4038}
.vlist li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-top:9px}
.vlist b{color:var(--g-900)}

/* Brex-style tier table */
.tiers{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:6px 26px;box-shadow:var(--shadow-md)}
.tier{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);padding:17px 4px;align-items:baseline}
.tier:last-child{border-bottom:0}
.tier .a{font-size:clamp(19px,2.6vw,26px);font-weight:700;color:var(--g-800)}
.tier .b{font-size:clamp(21px,3vw,30px);font-weight:700;color:var(--gold-ink);text-align:left}
html[lang="en"] .tier .b{text-align:right}
.tier.head{padding:13px 4px}
.tier.head .a,.tier.head .b{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* pre-footer CTA panel */
.prefoot{background:var(--g-950);border-radius:26px;padding:clamp(36px,6vw,64px);text-align:center;color:#EAF2ED;position:relative;overflow:hidden}
.prefoot::before{content:"";position:absolute;inset:0;background:radial-gradient(560px 300px at 50% -20%,rgba(18,89,68,.6),transparent 65%)}
.prefoot>*{position:relative}
.prefoot .display{color:#FFF;font-size:clamp(26px,4.4vw,42px)}
.prefoot p{color:#B7CCC2;margin:12px auto 26px;max-width:520px;font-size:15px}

/* mega footer */
.megafoot{background:var(--g-950);color:#A9BFB5;padding:52px 0 40px;margin-top:64px;font-size:13px}
.megafoot .cols{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:28px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.14)}
@media(max-width:760px){.megafoot .cols{grid-template-columns:1fr 1fr}}
.megafoot h5{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8FAEA2;margin-bottom:14px;font-weight:700}
.megafoot ul{list-style:none;display:grid;gap:9px}
.megafoot a{color:#D3E2DA;text-decoration:none}
.megafoot a:hover{color:#E9C766}
.megafoot .logo{font-size:22px;color:#FFF}
.megafoot .logo b{color:#E9C766}
.megafoot .fine{padding-top:22px;color:#7E988D;font-size:11.5px;line-height:1.9;max-width:900px}