/* The lead-flow modal (site-flows.js), with the look it had before the redesign.
   Every rule is scoped under #modal so none of it reaches the design's components,
   and the design's global link rules are the only ones it has to out-rank. */

#modal{
  /* ink and neutrals */
  --zm-ink:#12141A;          /* primary buttons, headings, selected states */
  --zm-ink-hover:#2A2D35;
  --zm-ink-2:#2B303A;        /* raised surface on ink */
  --zm-text:#181D27;         /* body text */
  --zm-text-2:#414651;
  --zm-text-3:#535861;       /* secondary copy */
  --zm-text-4:#717680;       /* meta, captions */
  --zm-text-5:#8A8F98;       /* quiet labels, unselected */
  --zm-text-6:#A4A7AE;       /* struck prices, disabled */
  --zm-border-strong:#D5D7DA;/* inputs, secondary buttons */
  --zm-border:#E4E5E8;       /* cards */
  --zm-border-soft:#ECEDEF;  /* list rows */
  --zm-divider:#F0F1F3;      /* header rule, in-card dividers */
  --zm-bg:#FFFFFF;
  --zm-bg-subtle:#FAFAFB;    /* alternate sections */
  --zm-bg-muted:#F4F5F6;     /* segmented track, quiet panels */
  --zm-bg-chip:#F2F3F5;      /* language track, icon chips */
  --zm-bg-selected:#F6F7F8;  /* selected option fill */
  --zm-bg-badge:#ECEDEF;

  /* the handoff's one accent, used sparingly */
  --zm-accent:#5B47E0;
  --zm-accent-500:#7C6AF0;
  --zm-accent-400:#B3A7F7;
  --zm-accent-300:#CFC7FA;
  --zm-accent-soft:#F1EEFE;

  /* status */
  --zm-success:#17B26A; --zm-success-strong:#067647; --zm-success-soft:#ECFDF3;
  --zm-warning:#B54708; --zm-warning-soft:#FFFAEB;
  --zm-error:#B42318;   --zm-error-soft:#FEF3F2;

  /* radius */
  --zm-r-xs:6px; --zm-r-sm:8px; --zm-r-md:10px; --zm-r-lg:12px; --zm-r-xl:14px;
  --zm-r-2xl:16px; --zm-r-3xl:20px; --zm-r-card:24px; --zm-r-pill:999px;

  /* elevation */
  --zm-shadow-xs:0 1px 2px rgba(16,18,27,.06);
  --zm-shadow-card:0 1px 2px rgba(16,18,27,.04),0 14px 34px -20px rgba(16,18,27,.16);
  --zm-shadow-panel:0 24px 60px -36px rgba(16,18,27,.28),0 1px 3px rgba(16,18,27,.04);
  --zm-shadow-pop:0 30px 70px -30px rgba(16,18,27,.38),0 2px 8px rgba(16,18,27,.06);
  --zm-shadow-btn:0 1px 2px rgba(10,13,18,.12),0 8px 24px -10px rgba(18,20,26,.45);

  /* type: SF Arabic on Apple (via system-ui), IBM Plex Sans Arabic elsewhere, Inter for Latin */
  --zm-font-ar:"IBM Plex Sans Arabic","Noto Sans Arabic",ui-sans-serif,sans-serif;
  --zm-font-latin:Inter,"IBM Plex Sans Arabic",ui-sans-serif,system-ui,sans-serif;
  --zm-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  --zm-ease:cubic-bezier(.2,.7,.2,1);
  --zm-header-h:68px;
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --font-ar:var(--zm-font-ar);
  --font-latin:var(--zm-font-latin);
  --font-sans:var(--font-ar);
}
#modal[data-apple]{--zm-font-ar:system-ui,-apple-system,"SF Arabic",".SF Arabic","IBM Plex Sans Arabic",sans-serif}
:root[lang="en"] #modal{--font-sans:var(--font-latin)}

/* what the modal inherited from the old page's base styles */
#modal{font-family:var(--font-sans);font-size:16px;line-height:1.55;color:var(--zm-text);text-align:start;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
#modal :is(h1,h2,h3,h4){margin:0;font-weight:600;letter-spacing:normal;line-height:1.25;color:var(--zm-ink)}
#modal p{margin:0}
#modal ul{margin:0;padding:0;list-style:none}
#modal img,#modal svg{display:block;max-width:100%}
#modal a{color:inherit;text-decoration:none}
/* the design sets button{font-family:inherit}; the old page left unclassed buttons on the browser default */
#modal button{font-family:revert}

#modal .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:48px;padding:0 22px;border-radius:var(--zm-r-lg);border:1px solid transparent;
  font-family:inherit;font-size:15.5px;font-weight:600;letter-spacing:normal;line-height:1;
  cursor:pointer;white-space:nowrap;text-decoration:none!important;
  transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s;
}
#modal .btn-primary{background:var(--zm-ink);color:#fff;box-shadow:var(--zm-shadow-btn)}
#modal .btn-primary:hover{background:var(--zm-ink-hover);color:#fff;transform:translateY(-1px)}
#modal .btn-ghost{background:#fff;color:var(--zm-ink);border-color:var(--zm-border-strong)}
#modal .btn-ghost:hover{background:#fff;color:var(--zm-ink);border-color:var(--zm-ink)}
#modal .btn-light{background:#fff;color:var(--zm-ink)}
#modal .btn-light:hover{background:var(--zm-bg-chip)}
#modal .btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
#modal .btn-outline-light:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6)}
#modal .btn-sm{height:44px;padding:0 16px;font-size:14px;border-radius:var(--zm-r-md)}
#modal .btn-lg{height:54px;padding:0 26px;font-size:16px;border-radius:var(--zm-r-xl)}
#modal .btn:disabled,#modal .btn[aria-disabled="true"]{transform:none}
@media (prefers-reduced-motion:reduce){#modal .btn:hover{transform:none}}
#modal :where(a,button,[tabindex],summary,input[type=range]):focus-visible{outline:2px solid var(--zm-ink);outline-offset:3px}
#modal .lede{font-size:18px;line-height:1.85;color:var(--zm-text-3)}
:root[lang="en"] #modal .lede{line-height:1.65}

#modal[hidden]{display:none!important}
#modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
#modal .modal-scrim{position:absolute;inset:0;background:rgba(16,18,27,.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fade-in-up .2s var(--ease-out-expo)}
#modal .modal-panel{
  position:relative;background:#fff;border:1px solid var(--zm-border);border-radius:var(--zm-r-card);overflow:hidden;
  width:min(940px,100%);max-height:min(760px,92vh);display:flex;flex-direction:column;
  box-shadow:var(--zm-shadow-pop);animation:pop-in .26s var(--ease-out-expo);
}
#modal .modal-x{
  position:absolute;top:12px;inset-inline-end:12px;z-index:5;
  width:40px;height:40px;background:var(--zm-bg-chip);border:0;border-radius:var(--zm-r-md);cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--zm-text-3);transition:background .2s,color .2s;
}
#modal .modal-x:hover{color:var(--zm-ink);background:var(--zm-border-soft)}
#modal .modal-x::before,#modal .modal-x::after{content:"";position:absolute;width:14px;height:1.6px;border-radius:2px;background:currentColor}
#modal .modal-x::before{transform:rotate(45deg)}#modal .modal-x::after{transform:rotate(-45deg)}
#modal .modal-body{overflow-y:auto;display:flex;min-height:0;flex:1}
#modal .modal-body:focus{outline:none}

/* two-pane booking layout */
#modal .bk{display:grid;grid-template-columns:300px minmax(0,1fr);width:100%;min-height:0}
#modal .bk-aside{padding:32px 28px;border-inline-end:1px solid var(--zm-divider);background:var(--zm-bg-subtle)}
#modal .bk-aside .who{font-size:13px;font-weight:600;color:var(--zm-text-5);margin-bottom:6px}
#modal .bk-aside h3{font-size:22px;font-weight:700;line-height:1.35;margin:0 0 18px;color:var(--zm-ink)}
#modal .bk-meta{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
#modal .bk-meta div{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--zm-text-3)}
#modal .bk-meta svg{flex:none;color:var(--zm-text-5)}
#modal .bk-note{font-size:13.5px;line-height:1.7;color:var(--zm-text-4);border-top:1px solid var(--zm-border-soft);padding-top:16px}
#modal .bk-main{padding:32px 30px;min-width:0}
#modal .bk-step{font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--zm-text-5);margin-bottom:14px}
#modal .bk-main h4{font-size:18px;font-weight:600;margin:0 0 16px;color:var(--zm-ink)}

/* calendar */
#modal .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
#modal .cal-head strong{font-size:15px;font-weight:600;color:var(--zm-ink)}
#modal .cal-nav{display:flex;gap:6px}
#modal .cal-nav button{width:44px;height:44px;border:1px solid var(--zm-border);border-radius:var(--zm-r-md);background:#fff;cursor:pointer;color:var(--zm-text-2);font-size:15px;transition:border-color .2s,background .2s}
#modal .cal-nav button:hover:not(:disabled){border-color:var(--zm-text-6)}
#modal .cal-nav button:disabled{opacity:.35;cursor:not-allowed}
#modal .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
#modal .cal-dow{font-family:var(--font-sans);font-size:11.5px;font-weight:600;color:var(--zm-text-5);text-align:center;padding-bottom:6px}
#modal .cal-day{
  aspect-ratio:1;min-height:44px;border:1px solid transparent;border-radius:var(--zm-r-md);background:var(--zm-bg-muted);
  cursor:pointer;font-family:var(--font-sans);font-size:14px;font-weight:500;color:var(--zm-text);
  display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s;
}
#modal .cal-day:hover:not(:disabled){background:#fff;border-color:var(--zm-text-6)}
#modal .cal-day:disabled{background:transparent;color:var(--zm-text-6);cursor:not-allowed}
#modal .cal-day[aria-pressed="true"]{background:var(--zm-ink);color:#fff;border-color:var(--zm-ink)}

/* time slots */
#modal .bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin-top:4px}
#modal .bk-slot{
  min-height:44px;border:1px solid var(--zm-border);border-radius:var(--zm-r-md);background:#fff;cursor:pointer;
  font-family:var(--font-latin);font-size:14px;font-weight:500;color:var(--zm-text);font-variant-numeric:tabular-nums;
  transition:border-color .15s,background .15s;
}
#modal .bk-slot:hover{border-color:var(--zm-text-6)}
#modal .bk-slot[aria-pressed="true"]{background:var(--zm-ink);color:#fff;border-color:var(--zm-ink)}
#modal .tz{font-size:12.5px;color:var(--zm-text-4);margin-top:14px}

/* forms */
#modal .field{margin-bottom:16px}
#modal .field label{display:block;font-size:14px;font-weight:600;color:var(--zm-text-2);margin-bottom:6px}
#modal .field .req{color:var(--zm-error)}
#modal .field input,#modal .field select,#modal .field textarea{
  width:100%;min-height:46px;padding:11px 14px;border:1px solid var(--zm-border-strong);border-radius:var(--zm-r-lg);
  background:#fff;font-family:var(--font-sans);font-size:15px;color:var(--zm-text);
  box-shadow:var(--zm-shadow-xs);transition:border-color .15s,box-shadow .15s;
}
#modal .field input::placeholder,#modal .field textarea::placeholder{color:var(--zm-text-6)}
#modal .field textarea{min-height:88px;resize:vertical}
#modal .field input:focus,#modal .field select:focus,#modal .field textarea:focus{outline:none;border-color:var(--zm-ink);box-shadow:0 0 0 3px rgba(18,20,26,.1)}
#modal .send-error{
  margin-top:14px;padding:11px 14px;background:var(--zm-error-soft);border:1px solid #FECDCA;border-radius:var(--zm-r-lg);
  font-size:14px;line-height:1.6;color:var(--zm-error);
}
#modal .field .err{display:none;font-size:13px;color:var(--zm-error);margin-top:6px}
#modal .field.invalid input,#modal .field.invalid select{border-color:var(--zm-error)}
#modal .field.invalid input:focus,#modal .field.invalid select:focus{box-shadow:0 0 0 3px rgba(180,35,24,.12)}
#modal .field.invalid .err{display:block}
#modal .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#modal .bk-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;align-items:center}
#modal .bk-back{background:none;border:0;cursor:pointer;font-family:var(--font-sans);font-size:14.5px;font-weight:500;color:var(--zm-text-3);min-height:44px;padding:0 4px}
#modal .bk-back:hover{color:var(--zm-ink)}

/* confirmation */
#modal .done{padding:52px 40px;text-align:center;margin:auto}
#modal .done .tick{width:56px;height:56px;margin:0 auto 22px;border-radius:50%;background:var(--zm-success-soft);display:flex;align-items:center;justify-content:center}
#modal .done h3{font-size:24px;font-weight:700;margin:0 0 12px;color:var(--zm-ink)}
#modal .done p{font-size:16px;line-height:1.75;color:var(--zm-text-3);max-width:420px;margin:0 auto 10px}
#modal .done .recap{
  display:inline-flex;flex-direction:column;gap:4px;margin:20px auto 26px;padding:14px 22px;border-radius:var(--zm-r-lg);
  background:var(--zm-bg-subtle);border:1px solid var(--zm-border);font-size:14.5px;color:var(--zm-text);
}

/* ============================================================
   NARROW PANES  (request access / sign in)
   ============================================================ */
#modal .modal-panel--narrow{width:min(460px,100%)}
#modal .pane{width:100%;padding:40px 36px 32px}
#modal .pane h3{font-size:24px;font-weight:700;line-height:1.35;margin:0 0 8px;color:var(--zm-ink)}
#modal .pane .sub{font-size:15px;line-height:1.7;color:var(--zm-text-3);margin:0 0 24px}
#modal .pane .btn-primary{border-radius:var(--zm-r-lg)}
#modal .pane-foot{
  margin-top:24px;padding-top:18px;border-top:1px solid var(--zm-divider);
  font-size:14px;color:var(--zm-text-3);display:flex;gap:8px;flex-wrap:wrap;align-items:center;
}
#modal .pane-foot button,#modal .pane-foot a{
  background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-sans);font-size:14px;
  color:var(--zm-ink);font-weight:600;text-decoration:underline!important;text-decoration-color:#C9CBD1!important;text-underline-offset:4px;
  min-height:44px;display:inline-flex;align-items:center;
}
#modal .pane-foot button:hover,#modal .pane-foot a:hover{text-decoration-color:var(--zm-ink)!important}
#modal .pane .legal{margin-top:16px;font-size:12.5px;line-height:1.7;color:var(--zm-text-4)}
#modal .pane .legal a{color:var(--zm-text-2);text-decoration:underline!important;text-underline-offset:3px}
/* app download: the two stores side by side, each a full-height button */
#modal .app-dl-stores{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#modal .app-dl-store{height:56px;padding:0 16px;gap:10px;justify-content:flex-start}
#modal .app-dl-store>svg{flex:none}
#modal .app-dl-store>span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;font-size:16px;font-weight:600;font-family:Inter,var(--font-sans)}
#modal .app-dl-store small{font-size:11px;font-weight:500;opacity:.75;font-family:var(--font-sans)}
@media (max-width:420px){#modal .app-dl-stores{grid-template-columns:1fr}}

/* ============================================================
   ASSESSMENT
   ============================================================ */
#modal .as{width:100%;padding:34px 38px 38px;display:flex;flex-direction:column;min-height:0}
#modal .as-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
/* The close button (40px, 12px in from the corner) sits over the end of this row, so
   in English the question counter ("4 of 7") clears it. The Arabic counter sits under
   it the same way, as approved; drop :root[lang="en"] here and below to clear both. */
:root[lang="en"] #modal .as-top{padding-inline-end:22px}
#modal .as-count{font-family:var(--font-latin);font-size:12.5px;font-weight:600;color:var(--zm-text-5);font-variant-numeric:tabular-nums}
#modal .as-bar{height:4px;background:var(--zm-bg-chip);border-radius:var(--zm-r-pill);overflow:hidden;margin:14px 0 28px}
#modal .as-bar i{display:block;height:100%;background:var(--zm-ink);border-radius:inherit;transition:width .4s var(--ease-out-expo)}
[dir="rtl"] #modal .as-bar{transform:scaleX(-1)}
#modal .as h3{font-size:clamp(20px,2.2vw,26px);font-weight:700;line-height:1.4;margin:0 0 22px;color:var(--zm-ink);max-width:620px}
:root[lang="en"] #modal .as h3{text-wrap:balance} /* English questions wrap without a lone last word */
#modal .as-opts{display:flex;flex-direction:column;gap:10px}
#modal .as-opt{
  display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:14px 18px;
  border:1px solid var(--zm-border);border-radius:var(--zm-r-lg);background:#fff;cursor:pointer;text-align:start;
  font-family:var(--font-sans);font-size:15.5px;font-weight:500;color:var(--zm-text);
  transition:border-color .15s ease,background .15s ease;
}
#modal .as-opt:hover{border-color:var(--zm-text-6)}
#modal .as-opt[aria-pressed="true"]{border:1.5px solid var(--zm-ink);background:var(--zm-bg-selected);padding:13.5px 17.5px}
#modal .as-opt .mark{
  flex:none;width:20px;height:20px;border:1.5px solid var(--zm-border-strong);border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s;
}
#modal .as-opt[aria-pressed="true"] .mark{border-color:var(--zm-ink);background:var(--zm-ink)}
#modal .as-opt[aria-pressed="true"] .mark::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}

/* result */
#modal .as-score{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
#modal .as-score b{font-family:var(--font-latin);font-size:64px;font-weight:600;letter-spacing:-.035em;line-height:1;color:var(--zm-ink)}
#modal .as-score span{font-family:var(--font-latin);font-size:14px;font-weight:500;color:var(--zm-text-4)}
#modal .as-band{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:var(--zm-r-pill);font-size:13.5px;font-weight:600;margin-bottom:18px}
#modal .as-band.early{background:var(--zm-error-soft);color:var(--zm-error)}
#modal .as-band.building{background:var(--zm-warning-soft);color:var(--zm-warning)}
#modal .as-band.ready{background:var(--zm-success-soft);color:var(--zm-success-strong)}
#modal .as-recs{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--zm-border-soft)}
#modal .as-recs li{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--zm-border-soft);font-size:15px;line-height:1.7;color:var(--zm-text-3)}
#modal .as-recs li b{display:block;color:var(--zm-ink);font-weight:600;margin-bottom:2px}
#modal .as-recs .n{font-family:var(--font-latin);font-size:12px;font-weight:600;color:var(--zm-text-5);flex:none;padding-top:3px}
#modal .as-capture{margin-top:26px;padding:22px;background:var(--zm-bg-subtle);border:1px solid var(--zm-border);border-radius:var(--zm-r-3xl)}
#modal .as-capture h4{font-size:17px;font-weight:600;margin:0 0 6px;color:var(--zm-ink)}
#modal .as-capture p{font-size:14px;color:var(--zm-text-3);margin:0 0 16px}

@media (max-width:820px){
  #modal{padding:0;align-items:stretch}
  #modal .modal-panel{max-height:100vh;height:100vh;width:100%;border:0;border-radius:0}
  #modal .bk{grid-template-columns:1fr}
  #modal .bk-aside{border-inline-end:0;border-bottom:1px solid var(--zm-divider);padding:24px}
  #modal .bk-main{padding:24px}
  #modal .as{padding:24px}
  :root[lang="en"] #modal .as-top{padding-inline-end:36px}
  #modal .form-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  #modal .modal-panel,#modal .modal-scrim{animation:none}
}
@media (max-width:560px){
  #modal .pane{padding:36px 22px 28px}
}

@keyframes fade-in-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translate(0)}}
@keyframes pop-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}