/* Edler Zain client onboarding portal. Tokens follow the firm design system:
   every color is lifted from firm source files (QoE template fills, letterhead, social header). */
@font-face{font-family:"Archia";src:url("/static/fonts/archia-regular-webfont.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Archia";src:url("/static/fonts/archia-medium-webfont.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Archia";src:url("/static/fonts/archia-semibold-webfont.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Archia";src:url("/static/fonts/archia-bold-webfont.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("/static/fonts/PlusJakartaSans-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("/static/fonts/PlusJakartaSans-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("/static/fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("/static/fonts/PlusJakartaSans-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root {
  --ez-teal-900:#014751; --ez-teal-800:#0A5A64; --ez-teal-100:#E2EDEE;
  --ez-night-900:#061418; --ez-night-800:#032D34;
  --ez-green-600:#37A18B; --ez-green-700:#297968; --ez-green-500:#5CB6A3;
  --ez-mint-200:#B7E1CD; --ez-mint-100:#E4F3EB;
  --ez-ink-900:#231F20; --ez-ink-700:#3D3A3B; --ez-ink-500:#6B6A6B; --ez-ink-300:#A2A1A1;
  --ez-grey-200:#D9D9D9; --ez-grey-100:#ECEEEF; --ez-grey-050:#F6F8F9;
  --ez-red-600:#B4433C; --ez-red-100:#F6E5E4; --ez-amber-600:#B0762A; --ez-amber-100:#F8EEDC;
  --font-display:"Archia","Plus Jakarta Sans",system-ui,sans-serif;
  --font-sans:"Plus Jakarta Sans","Archia",system-ui,sans-serif;
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(1,71,81,.06); --shadow-md:0 4px 12px rgba(1,71,81,.08);
  --ring-focus:0 0 0 3px rgba(55,161,139,.35);
  --gutter:clamp(20px,5vw,64px); --measure:1040px;
}
* { box-sizing:border-box; }
html, body { margin:0; background:var(--ez-grey-050); color:var(--ez-ink-700); font-family:var(--font-sans); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--ez-teal-900); text-decoration:none; } a:hover { color:var(--ez-green-700); }
code { font-size:.85em; background:var(--ez-grey-100); padding:1px 6px; border-radius:var(--radius-sm); }

/* ----- header / hero / layout ----- */
header.top { background:linear-gradient(90deg,#061418 0%,#032D34 55%,#014751 100%); padding:0 var(--gutter); }
header.top .navbar { max-width:var(--measure); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:72px; }
.brand { display:flex; align-items:center; gap:18px; min-width:0; color:#fff; }
.brand img { height:26px; width:auto; display:block; }
.brand .sep { width:1px; height:22px; background:rgba(255,255,255,.22); display:block; }
.brand .label { font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72); white-space:nowrap; }
.who { display:flex; align-items:center; gap:14px; font-size:13px; color:rgba(255,255,255,.62); white-space:nowrap; }
.who form { margin:0; }
.hero { background:#fff url("/static/brand/pattern-ribbon.png") right center / cover no-repeat; border-bottom:1px solid var(--ez-grey-200); padding:48px var(--gutter) 40px; }
.hero.compact { padding:32px var(--gutter) 28px; }
.hero > div { max-width:var(--measure); margin:0 auto; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ez-green-700); margin-bottom:14px; }
h1 { font-family:var(--font-display); font-size:clamp(30px,4vw,44px); line-height:1.05; letter-spacing:-.02em; font-weight:700; color:var(--ez-teal-900); margin:0 0 14px; }
h2 { font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:-.01em; color:var(--ez-teal-900); margin:0 0 4px; }
h2 + .rule { width:44px; height:3px; background:var(--ez-green-600); border-radius:var(--radius-pill); margin:12px 0 18px; }
p.lead { font-size:16px; line-height:1.6; color:var(--ez-ink-700); margin:0 0 22px; max-width:56ch; text-wrap:pretty; }
main.wrap { max-width:var(--measure); margin:0 auto; padding:32px var(--gutter) 24px; display:grid; gap:24px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { font-size:13px; font-weight:600; color:var(--ez-teal-900); background:var(--ez-mint-100); border:1px solid var(--ez-mint-200); border-radius:var(--radius-pill); padding:6px 14px; display:inline-block; }
.chip.warn { background:var(--ez-amber-100); border-color:var(--ez-amber-100); color:var(--ez-amber-600); }
.chip.mint { background:var(--ez-teal-900); border-color:var(--ez-teal-900); color:#fff; text-transform:uppercase; font-size:11px; letter-spacing:.08em; padding:4px 10px; }

/* ----- cards / steps ----- */
.card { background:#fff; border:1px solid var(--ez-grey-200); border-radius:var(--radius-md); box-shadow:var(--shadow-xs); padding:24px; }
.card.flush { padding:0; overflow:hidden; }
.card .head { padding:22px 24px 18px; border-bottom:1px solid var(--ez-grey-200); display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.card .head h2 { margin:0; } .card .head .note { font-size:13px; color:var(--ez-ink-500); }
.card .foot { padding:22px 24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.step { background:#fff; border:1px solid var(--ez-grey-200); border-radius:var(--radius-md); padding:20px 22px; box-shadow:var(--shadow-xs); display:grid; gap:10px; color:inherit; }
.step.active { border-color:var(--ez-teal-900); }
.step.done { border-color:var(--ez-mint-200); }
.step .row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.step .n { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ez-ink-500); }
.step.active .n { color:var(--ez-teal-900); }
.badge { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-radius:var(--radius-pill); padding:4px 10px; color:var(--ez-ink-500); background:var(--ez-grey-100); }
.badge.active { color:#fff; background:var(--ez-teal-900); }
.badge.done { color:var(--ez-green-700); background:var(--ez-mint-100); }
.step .title { font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:-.01em; color:var(--ez-ink-900); }
.step .sub { font-size:13px; font-weight:600; color:var(--ez-ink-500); }
.bar { height:4px; border-radius:var(--radius-pill); background:var(--ez-grey-100); overflow:hidden; }
.bar > span { display:block; height:100%; background:var(--ez-green-600); }

/* numbered list rows */
.rows { display:grid; }
.rows a, .rows .r { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:14px; padding:16px 24px; border-bottom:1px solid var(--ez-grey-200); transition:background 120ms cubic-bezier(.2,0,.2,1); }
.rows a:hover { background:var(--ez-grey-050); }
.rows .num { font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--ez-ink-300); font-variant-numeric:tabular-nums; }
.rows .name { font-size:15px; font-weight:600; color:var(--ez-teal-900); }
.status { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ez-ink-500); }
.status.done { color:var(--ez-green-700); } .status.partial { color:var(--ez-amber-600); }
.dots { display:grid; gap:10px; }
.dots div { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:baseline; }
.dots span.d { width:6px; height:6px; border-radius:50%; background:var(--ez-green-600); transform:translateY(-3px); }
.meta { border-top:1px solid var(--ez-grey-200); padding-top:16px; font-size:13px; color:var(--ez-ink-500); }
.muted { color:var(--ez-ink-500); } .small { font-size:13px; }

/* ----- forms ----- */
label { display:block; font-weight:600; color:var(--ez-ink-900); margin:18px 0 6px; font-size:14px; }
label .req { color:var(--ez-red-600); }
.help { color:var(--ez-ink-500); font-size:13px; margin:4px 0 0; }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=url], select, textarea {
  width:100%; padding:11px 12px; border:1px solid var(--ez-grey-200); border-radius:var(--radius-sm); font:inherit; font-size:15px; background:#fff; color:var(--ez-ink-900); }
textarea { min-height:92px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--ez-green-600); box-shadow:var(--ring-focus); }
.opts label { font-weight:500; margin:6px 0; display:flex; gap:10px; align-items:flex-start; color:var(--ez-ink-700); }
.opts input { margin-top:5px; accent-color:var(--ez-teal-900); }
.err { color:var(--ez-red-600); font-size:13px; margin-top:4px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color:var(--ez-red-600); }
.btn { display:inline-block; font-family:var(--font-sans); font-size:15px; font-weight:700; color:#fff; background:var(--ez-teal-900); border:none; border-radius:var(--radius-md); padding:13px 26px; cursor:pointer; box-shadow:var(--shadow-xs); transition:background 120ms cubic-bezier(.2,0,.2,1); text-decoration:none; }
.btn:hover { background:var(--ez-teal-800); color:#fff; } .btn:active { background:var(--ez-night-800); box-shadow:none; }
.btn:disabled { background:var(--ez-grey-200); color:var(--ez-ink-500); cursor:not-allowed; box-shadow:none; }
.btn.secondary { background:#fff; color:var(--ez-teal-900); border:1px solid var(--ez-grey-200); box-shadow:none; }
.btn.secondary:hover { background:var(--ez-grey-050); color:var(--ez-teal-900); }
.btn.ghost { background:transparent; color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.28); box-shadow:none; padding:7px 14px; font-size:13px; }
.btn.ghost:hover { background:rgba(255,255,255,.08); }
.btn.small { padding:8px 14px; font-size:13px; }
.btn.danger { background:#fff; color:var(--ez-red-600); border:1px solid var(--ez-red-600); box-shadow:none; }
.actions { display:flex; gap:12px; align-items:center; margin-top:24px; flex-wrap:wrap; }
.actions form { margin:0; }
.notice { background:var(--ez-mint-100); border:1px solid var(--ez-mint-200); color:var(--ez-teal-900); border-radius:var(--radius-md); padding:12px 16px; font-size:14px; }
.notice.warn { background:var(--ez-amber-100); border-color:var(--ez-amber-100); color:var(--ez-amber-600); }
.notice.error { background:var(--ez-red-100); border-color:var(--ez-red-100); color:var(--ez-red-600); }
.otp { font-family:var(--font-display); font-size:2rem; letter-spacing:.3em; text-align:center; }

/* ----- tables ----- */
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--ez-grey-200); vertical-align:top; }
th { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ez-ink-500); background:var(--ez-grey-050); }

/* ----- uploads ----- */
.upl { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; padding:18px 24px; border-bottom:1px solid var(--ez-grey-200); }
.upl:last-child { border-bottom:0; }
.upl b { color:var(--ez-ink-900); font-weight:600; }
.upl .files { margin:8px 0 0; padding-left:18px; font-size:13px; color:var(--ez-ink-700); }
.upl form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.upl label.inline { display:flex; gap:6px; align-items:center; margin:0; font-size:12px; color:var(--ez-ink-500); font-weight:600; white-space:nowrap; }
.upl label.inline select, .upl label.inline input { width:auto; padding:7px 8px; font-size:13px; }
input[type=file] { font-size:13px; max-width:240px; }

/* ----- scheduler ----- */
.days { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.day { border:1px solid var(--ez-grey-200); border-radius:var(--radius-md); padding:12px; background:#fff; }
.day h4 { margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ez-teal-900); }
.slot { display:block; width:100%; margin:4px 0; padding:9px; border:1px solid var(--ez-grey-200); border-radius:var(--radius-sm); background:#fff; font:inherit; font-size:14px; color:var(--ez-ink-900); cursor:pointer; transition:background 120ms; }
.slot:hover { background:var(--ez-grey-050); border-color:var(--ez-green-500); }
.slot.selected { background:var(--ez-mint-100); border-color:var(--ez-green-600); color:var(--ez-teal-900); font-weight:600; }

footer.site { padding:8px var(--gutter) 48px; }
footer.site > div { max-width:var(--measure); margin:0 auto; border-top:1px solid var(--ez-grey-200); padding-top:24px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
footer.site img { height:18px; width:auto; display:block; opacity:.85; }
footer.site .addr { font-size:13px; color:var(--ez-ink-500); text-wrap:pretty; }
@media (max-width:640px) { .who .email, .brand .label, .brand .sep { display:none; } .who > span { font-size:12px; } .upl { flex-direction:column; } .upl form { justify-content:flex-start; } .steps { grid-template-columns:1fr; } }
.narrow { max-width:560px; }