/* q8leads — one stylesheet for all three pages. Arabic, RTL, phone first (375px), light only.
   Visual language lifted from the outreach guide: white paper, one orange, soft hairlines. */

:root{
  --bg:#ffffff; --paper:#ffffff; --sand:#fafafa;
  --ink:#1a1a1a; --muted:#5c5c5c; --line:#ececec;
  --orange:#f26b1d; --orange-dark:#d4550c; --orange-soft:#fff1e8;
  --green:#127a52; --green-soft:#e8f5ef; --red:#b3261e; --red-soft:#fdecea;
  --radius:14px;
  --shadow:0 2px 0 var(--line);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Cairo",Tahoma,"Segoe UI",Arial,sans-serif;
  font-size:16px; line-height:1.75;
  -webkit-text-size-adjust:100%;
}
a{color:var(--orange-dark)}
img,svg{max-width:100%}

/* ---------- shell ---------- */
.topbar{
  background:var(--orange); color:#fff;
  padding:calc(1rem + env(safe-area-inset-top,0px)) 1.1rem 1rem;
}
.topbar .row{display:flex; align-items:center; gap:.6rem; max-width:34rem; margin:0 auto}
.topbar h1{font-size:1.15rem; font-weight:800; margin:0; flex:1; line-height:1.4}
.topbar .sub{font-size:.85rem; opacity:.95; margin:.15rem auto 0; max-width:34rem}

.wrap{max-width:34rem; margin:0 auto; padding:1.1rem 1.1rem 5.5rem}
.wrap.plain{padding-bottom:2.5rem}

h2{font-size:1.15rem; font-weight:800; margin:0 0 .8rem;
   padding-inline-start:.7rem; border-inline-start:5px solid var(--orange); line-height:1.4}
h3{font-size:1rem; font-weight:800; margin:0 0 .5rem}
p{margin:0 0 .8rem}
.muted{color:var(--muted); font-size:.9rem}
.center{text-align:center}

/* ---------- cards ---------- */
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1rem 1.15rem; box-shadow:var(--shadow); margin-bottom:.9rem;
}
.card.tight{padding:.85rem .95rem}
.card.soft{background:var(--orange-soft); border-color:#fbdcc7; box-shadow:none}
.card.flat{box-shadow:none}

.lead-name{font-size:1.45rem; font-weight:800; line-height:1.35; margin:0 0 .5rem}
.chips{display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 .2rem}
.chip{
  background:var(--sand); border:1px solid var(--line); border-radius:999px;
  padding:.15rem .7rem; font-size:.82rem; color:var(--muted); white-space:nowrap;
}
.chip.on{background:var(--orange-soft); border-color:#fbdcc7; color:var(--orange-dark); font-weight:700}

/* ---------- buttons ---------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; font:inherit; font-weight:800; font-size:1rem;
  background:var(--orange); color:#fff; border:0; border-radius:999px;
  padding:.85rem 1.2rem; cursor:pointer; text-decoration:none; text-align:center;
  min-height:48px;
}
.btn:hover{background:var(--orange-dark)}
.btn:disabled{background:#e6e6e6; color:#9a9a9a; cursor:not-allowed}
.btn.ghost{background:transparent; color:var(--muted); border:1px solid var(--line)}
.btn.ghost:hover{background:var(--sand); color:var(--ink)}
.btn.slim{min-height:40px; padding:.5rem 1rem; font-size:.92rem; width:auto}
.btn.danger{background:var(--red)}
.btn.green{background:var(--green)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.navlink:focus-visible{
  outline:3px solid var(--orange); outline-offset:2px
}
.btn-row{display:flex; gap:.5rem; flex-wrap:wrap}
.btn-row .btn{flex:1 1 8rem; width:auto}

.outcomes{display:grid; grid-template-columns:1fr 1fr; gap:.5rem}
.outcomes .btn{width:auto; font-size:.92rem; min-height:46px; background:var(--sand); color:var(--ink); border:1px solid var(--line)}
.outcomes .btn:hover{background:#f1f1f1}
.outcomes .btn.hot{grid-column:1 / -1; background:var(--green); color:#fff; border-color:var(--green)}
.outcomes .btn.hot:hover{filter:brightness(.94)}

/* ---------- forms ---------- */
label{display:block; font-weight:700; font-size:.92rem; margin:0 0 .3rem}
.field{margin-bottom:.95rem}
input[type=text],input[type=password],input[type=tel],input[type=number],input[type=date],select,textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:10px; padding:.7rem .8rem; min-height:46px;
}
textarea{line-height:1.9; resize:vertical}
select{appearance:none; background-image:linear-gradient(transparent,transparent)}
.hint{font-size:.82rem; color:var(--muted); margin:.3rem 0 0}
.checkline{display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.6rem; font-weight:600; font-size:.95rem}
.checkline input{width:22px; height:22px; margin:.25rem 0 0; flex:0 0 auto; accent-color:var(--orange)}
.checkline span{font-weight:500}

.msg{
  background:var(--sand); border:1px solid var(--line); border-inline-start:4px solid var(--orange);
  border-radius:10px; padding:.8rem .9rem; white-space:pre-wrap; line-height:1.95;
}
textarea.msg{white-space:pre-wrap}

/* orange ticks: the four things that have to be true, shown as a checklist */
ul.check{list-style:none; padding:0; margin:0}
ul.check li{position:relative; padding-inline-start:1.9rem; margin-bottom:.45rem}
ul.check li::before{
  content:"✓"; position:absolute; inset-inline-start:0; top:.05rem;
  width:1.35rem; height:1.35rem; border-radius:6px; background:var(--orange-soft); color:var(--orange-dark);
  display:grid; place-items:center; font-weight:800; font-size:.8rem;
}

/* phone field: a fixed dial code beside the local number */
.phone{display:flex; gap:.5rem; align-items:stretch}
.phone .dial{
  flex:0 0 auto; min-width:4.5rem; display:grid; place-items:center; direction:ltr;
  background:var(--sand); border:1px solid var(--line); border-radius:10px; font-weight:700; padding:0 .7rem;
}
.phone input{flex:1; min-width:0}

/* the one copy-the-sample-message bar, at the top of the work page */
.copybar{
  display:flex; gap:.6rem; align-items:center; justify-content:space-between;
  background:var(--orange-soft); border:1px solid #fbdcc7; border-radius:var(--radius);
  padding:.7rem .9rem; margin-bottom:.9rem;
}
.copybar p{margin:0; font-size:.86rem; font-weight:700; color:#8a3b08}
.copybar .btn{width:auto; flex:0 0 auto}

.proofbox{
  border:1px dashed var(--line); border-radius:10px; padding:.8rem; text-align:center; background:var(--sand);
}
.proofbox img{max-height:180px; border-radius:8px; margin-top:.5rem}
.proofbox input[type=file]{display:none}

/* ---------- notices ---------- */
.notice{border-radius:var(--radius); padding:.85rem 1rem; margin-bottom:.9rem; font-size:.95rem; font-weight:600}
.notice.warn{background:var(--orange-soft); color:#8a3b08; border:1px solid #fbdcc7}
.notice.bad{background:var(--red-soft); color:var(--red); border:1px solid #f6ccc8}
.notice.good{background:var(--green-soft); color:var(--green); border:1px solid #c9e6da}

.pill{display:inline-block; border-radius:999px; padding:.1rem .65rem; font-size:.8rem; font-weight:800}
.pill.open{background:#fff; color:var(--green)}
.pill.shut{background:rgba(255,255,255,.22); color:#fff}
.pill.good{background:var(--green-soft); color:var(--green)}
.pill.wait{background:var(--orange-soft); color:var(--orange-dark)}
.pill.bad{background:var(--red-soft); color:var(--red)}

/* ---------- counters / stats ---------- */
.counters{display:flex; gap:.5rem; margin-bottom:.9rem}
.counter{
  flex:1; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:.6rem .5rem; text-align:center; box-shadow:var(--shadow);
}
.counter b{display:block; font-size:1.35rem; font-weight:800; line-height:1.3}
.counter span{font-size:.78rem; color:var(--muted)}
.counter.accent b{color:var(--orange-dark)}

.stats{display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:.9rem}
.stat{background:var(--sand); border:1px solid var(--line); border-radius:var(--radius); padding:.7rem .8rem}
.stat b{display:block; font-size:1.3rem; font-weight:800}
.stat span{font-size:.82rem; color:var(--muted)}
.big-money{font-size:2.3rem; font-weight:800; color:var(--orange-dark); line-height:1.2}

/* ---------- lists / tables ---------- */
.rows{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff}
.rows .r{display:flex; gap:.7rem; align-items:center; padding:.75rem .9rem; border-bottom:1px solid var(--line)}
.rows .r:last-child{border-bottom:0}
.rows .r .grow{flex:1; min-width:0}
.rows .r .grow b{display:block; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rows .r .grow span{font-size:.82rem; color:var(--muted)}
.rank{width:28px; height:28px; border-radius:999px; background:var(--sand); color:var(--muted);
      display:grid; place-items:center; font-weight:800; font-size:.85rem; flex:0 0 auto}
.rank.top{background:var(--orange); color:#fff}
.r.me{background:var(--orange-soft)}

table{width:100%; border-collapse:collapse; font-size:.9rem}
th,td{padding:.55rem .5rem; text-align:start; border-bottom:1px solid var(--line); white-space:nowrap}
th{font-weight:800; color:var(--muted); font-size:.8rem}
.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ---------- bottom nav ---------- */
.nav{
  position:fixed; inset-inline:0; bottom:0; background:#fff; border-top:1px solid var(--line);
  display:flex; padding:.35rem .3rem calc(.35rem + env(safe-area-inset-bottom,0px)); z-index:20;
}
.navlink{
  flex:1; background:none; border:0; font:inherit; font-size:.72rem; font-weight:700;
  color:var(--muted); padding:.35rem .2rem; cursor:pointer; display:grid; gap:.1rem; justify-items:center;
  border-radius:10px; text-decoration:none;
}
.navlink em{font-size:1.15rem; font-style:normal; line-height:1.2}
.navlink.on{color:var(--orange-dark); background:var(--orange-soft)}

/* ---------- misc ---------- */
.hidden{display:none !important}
.spinner{width:22px; height:22px; border:3px solid rgba(255,255,255,.45); border-top-color:#fff;
         border-radius:999px; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.steps{display:flex; gap:.3rem; margin:0 0 1.1rem}
.steps i{flex:1; height:4px; border-radius:999px; background:var(--line)}
.steps i.on{background:var(--orange)}
details.q{background:#fff; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:.6rem}
details.q summary{cursor:pointer; padding:.8rem 1rem; font-weight:700; list-style:none;
  display:flex; justify-content:space-between; gap:.8rem}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+"; color:var(--orange); font-size:1.3rem; font-weight:800; line-height:1}
details.q[open] summary::after{content:"−"}
details.q .a{padding:0 1rem 1rem}
.toast{
  position:fixed; inset-inline:1rem; bottom:5rem; background:#1a1a1a; color:#fff; border-radius:12px;
  padding:.75rem 1rem; font-size:.92rem; font-weight:600; text-align:center; z-index:40; max-width:32rem;
  margin:0 auto; opacity:0; transform:translateY(8px); transition:opacity .18s, transform .18s; pointer-events:none;
}
.toast.show{opacity:1; transform:none}
.toast.bad{background:var(--red)}

@media (min-width:640px){
  .topbar{padding-top:calc(1.3rem + env(safe-area-inset-top,0px))}
  .outcomes{grid-template-columns:1fr 1fr 1fr}
  .outcomes .btn.hot{grid-column:1 / -1}
}