/* help.leaseexact.com: the calm white help template in the LeaseExact palette (Electric Indigo #4F46E5, Sunset Coral
   #EA580C, Carbon Ink #18181B; site/assets/css/site.css). Fonts are the site's own files (no third-party requests). Logical properties only,
   so Arabic and Urdu mirror with no extra sheet. */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:400 500;font-display:swap;src:url(fonts/plex-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+2066-2069}
@font-face{font-family:"IBM Plex Sans Arabic";font-weight:600 800;font-display:swap;src:url(fonts/plex-arabic-600.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+2066-2069}
@font-face{font-family:"Noto Naskh Arabic";font-weight:400 500;font-display:swap;src:url(fonts/noto-naskh-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+2066-2069}
@font-face{font-family:"Noto Naskh Arabic";font-weight:600 800;font-display:swap;src:url(fonts/noto-naskh-arabic-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+2066-2069}
@font-face{font-family:"Noto Nastaliq Urdu";font-weight:400 700;font-display:swap;src:url(fonts/noto-nastaliq-urdu.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
:root{
  color-scheme:light;
  --le-indigo:#4F46E5; --le-violet:#7C3AED; --le-coral:#EA580C; --le-carbon:#18181B; --le-paper:#FAFAFA;
  --kv-gradient:linear-gradient(120deg,var(--le-indigo),var(--le-violet) 55%,var(--le-coral));
  --primary:#4338CA; --primary-hover:#3730A3; --on-primary:#fff;
  --bg:#FAFAFA; --surface:#fff; --surface-2:#FCFCFD; --sunken:#F1F1F4;
  --border:#E4E4E7; --border-strong:#D4D4D8; --control:#8B8B95;
  --text:#18181B; --text-2:#52525B; --text-3:#71717A;
  --ok:#047857; --ok-bg:#ECFDF5; --warn:#B45309; --warn-bg:#FFFBEB; --bad:#B91C1C; --bad-bg:#FEF2F2; --info:#0369A1; --info-bg:#EFF6FF;
  --focus:#818CF8; --accent:#4F46E5;
  --font-latin:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font:var(--font-latin);
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px;
  --shadow-1:0 1px 2px rgb(9 13 22 / .06);
  --shadow-2:0 4px 16px rgb(9 13 22 / .08),0 1px 3px rgb(9 13 22 / .06);
  --lh:1.6; --gutter:16px; --max:1200px;
}
html[lang=ar]{ --font:"IBM Plex Sans Arabic","Segoe UI","Noto Sans Arabic",Tahoma,var(--font-latin); --lh:1.75 }
html[lang=ur]{ --font:"Noto Naskh Arabic","IBM Plex Sans Arabic","Segoe UI",Tahoma,var(--font-latin); --lh:1.95 }
html[lang=ur] h1,html[lang=ur] .hero h1{ font-family:"Noto Nastaliq Urdu","Noto Naskh Arabic",serif; line-height:2.05 }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:76px }
body{ margin:0; background:var(--bg); color:var(--text); font:15px/var(--lh) var(--font); }
html[lang=ar] body,html[lang=ur] body{ font-size:16px }
img{ max-width:100%; height:auto }
a{ color:var(--primary); text-underline-offset:2px }
a:hover{ color:var(--primary-hover) }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:4px }
code,kbd{ font-family:var(--mono); font-size:.9em; background:var(--sunken); padding:.1em .35em; border-radius:4px; direction:ltr; unicode-bidi:isolate }
bdi,.num{ direction:ltr; unicode-bidi:isolate }
.skip{ position:absolute; inset-inline-start:-9999px; top:8px; background:var(--surface); padding:8px 12px; z-index:50 }
.skip:focus{ inset-inline-start:8px }
.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter) }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* ---- top bar ---- */
.top{ position:sticky; top:0; z-index:20; background:var(--surface); border-block-end:1px solid var(--border) }
.top .wrap{ display:flex; align-items:center; gap:16px; min-height:60px }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); flex:none }
.brand img{ display:block; width:110px; height:auto }
.brand span{ font-weight:600; color:var(--text-2); padding-inline-start:10px; border-inline-start:1px solid var(--border-strong); line-height:1.2 }
.topsearch{ flex:1; max-width:440px; position:relative }
.topsearch input{ width:100%; height:38px; border:1px solid var(--border-strong); border-radius:var(--r-md); padding-inline:36px 12px; font:inherit; font-size:14px; background:var(--surface-2) url("search.svg") no-repeat; background-size:16px; background-position:12px 50% }
html[dir=rtl] .topsearch input{ background-position:calc(100% - 12px) 50% }
.topsearch input:focus{ background-color:var(--surface); border-color:var(--primary); outline:none; box-shadow:0 0 0 3px rgb(5 150 105 / .18) }
.topnav{ display:flex; gap:4px; margin-inline-start:auto; align-items:center }
.topnav a{ color:var(--text-2); text-decoration:none; font-size:14px; padding:8px 10px; border-radius:var(--r-sm); white-space:nowrap }
.topnav a:hover{ background:var(--sunken); color:var(--text) }
.lang{ position:relative }
.lang summary{ list-style:none; cursor:pointer; font-size:14px; color:var(--text-2); padding:8px 10px; border-radius:var(--r-sm); border:1px solid var(--border) ; white-space:nowrap }
.lang summary::-webkit-details-marker{ display:none }
.lang[open] summary{ background:var(--sunken) }
.lang ul{ position:absolute; inset-inline-end:0; top:calc(100% + 6px); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-2); list-style:none; margin:0; padding:6px; min-width:200px; z-index:30 }
.lang li a{ display:flex; justify-content:space-between; gap:12px; padding:8px 10px; border-radius:var(--r-sm); color:var(--text); text-decoration:none; font-size:14px }
.lang li a:hover,.lang li a[aria-current]{ background:var(--sunken) }
.lang li small{ color:var(--text-3) }
.menu-btn{ display:none }

/* ---- search dropdown ---- */
.sresults{ position:absolute; inset-inline:0; top:calc(100% + 6px); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-2); list-style:none; margin:0; padding:6px; max-height:70vh; overflow:auto; z-index:30 }
.sresults[hidden]{ display:none }
.sresults a{ display:block; padding:8px 10px; border-radius:var(--r-sm); text-decoration:none; color:var(--text) }
.sresults a:hover,.sresults a[aria-selected=true]{ background:var(--sunken) }
.sresults b{ display:block; font-weight:600; font-size:14px }
.sresults small{ color:var(--text-3); font-size:12px }
.sresults .empty{ padding:10px; color:var(--text-2); font-size:14px }

/* ---- layout ---- */
main{ display:block }
.page{ display:grid; grid-template-columns:240px minmax(0,1fr) 200px; gap:40px; padding-block:28px 56px }
.page.no-toc{ grid-template-columns:240px minmax(0,1fr) }
.side{ font-size:14px }
.side nav{ position:sticky; top:84px; max-height:calc(100vh - 100px); overflow:auto; padding-inline-end:6px }
.side h2{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); margin:0 0 8px; font-weight:600 }
html[lang=ar] .side h2,html[lang=ur] .side h2{ text-transform:none; letter-spacing:0; font-size:13px }
.side ul{ list-style:none; margin:0 0 18px; padding:0 }
.side li a{ display:block; padding:6px 10px; border-radius:var(--r-sm); color:var(--text-2); text-decoration:none; border-inline-start:2px solid transparent }
.side li a:hover{ background:var(--sunken); color:var(--text) }
.side li a[aria-current=page]{ background:color-mix(in srgb,var(--accent) 10%,white); color:var(--text); border-inline-start-color:var(--accent); font-weight:600 }
.side details summary{ cursor:pointer; font-weight:600; padding:8px 0; display:none }
.toc{ font-size:13px }
.toc nav{ position:sticky; top:84px }
.toc h2{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); margin:0 0 8px }
html[lang=ar] .toc h2,html[lang=ur] .toc h2{ text-transform:none; letter-spacing:0 }
.toc ul{ list-style:none; margin:0; padding:0; border-inline-start:1px solid var(--border) }
.toc a{ display:block; padding:4px 12px; color:var(--text-2); text-decoration:none }
.toc a:hover{ color:var(--primary) }

/* ---- breadcrumbs ---- */
.crumbs{ font-size:13px; color:var(--text-3); margin:0 0 14px }
.crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px }
.crumbs li+li::before{ content:"›"; margin-inline-end:6px; color:var(--border-strong) }
html[dir=rtl] .crumbs li+li::before{ content:"‹" }
.crumbs a{ color:var(--text-2); text-decoration:none }
.crumbs a:hover{ color:var(--primary); text-decoration:underline }

/* ---- article ---- */
.article{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:32px 40px; min-width:0 }
.article h1{ font-size:30px; line-height:1.25; margin:0 0 10px; letter-spacing:-.01em }
html[lang=ar] .article h1,html[lang=ur] .article h1{ letter-spacing:0; line-height:1.5 }
.article .lead{ font-size:17px; color:var(--text-2); margin:0 0 20px }
.article h2{ font-size:21px; margin:34px 0 10px; padding-top:6px; line-height:1.35 }
.article h3{ font-size:17px; margin:24px 0 8px }
.article h4{ font-size:15px; margin:18px 0 6px }
.article p,.article li{ max-width:72ch }
.article ul,.article ol{ padding-inline-start:24px }
.article li{ margin:6px 0 }
.article ol>li::marker{ font-weight:600; color:var(--primary) }
.article table{ border-collapse:collapse; width:100%; margin:16px 0; font-size:14px; display:block; overflow-x:auto }
.article th,.article td{ border-block-end:1px solid var(--border); padding:8px 10px; text-align:start; vertical-align:top }
.article th{ background:var(--surface-2); font-weight:600 }
.article hr{ border:0; border-block-start:1px solid var(--border); margin:28px 0 }
.article blockquote{ margin:18px 0; padding:12px 16px; background:var(--info-bg); border-inline-start:3px solid var(--info); border-radius:var(--r-md) }
.article blockquote.important{ background:var(--warn-bg); border-inline-start-color:var(--warn) }
.article blockquote p{ margin:4px 0 }
.badges{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px }
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--sunken); color:var(--text-2) }
.badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor }
.badge.early{ background:#F1EEFD; color:#5B3FC4 }
.badge.region{ background:var(--ok-bg); color:var(--ok) }
.badge.en{ background:var(--sunken); color:var(--text-2) }
.callout{ margin:0 0 20px; padding:12px 16px; border-radius:var(--r-md); font-size:14px; background:var(--surface-2); border:1px solid var(--border) }
.callout.early{ background:#F7F5FE; border-color:#E2DCFA }
.callout.region{ background:#F2FAF5; border-color:#CDE9D8 }

/* ---- screenshots and art ---- */
.shot{ margin:20px 0; }
.shot img{ display:block; border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-1) }
.shot figcaption{ font-size:13px; color:var(--text-3); margin-top:6px }
.shot.ph .box{ display:flex; flex-direction:column; justify-content:center; gap:6px; border:1.5px dashed var(--border-strong); border-radius:var(--r-md); background:repeating-linear-gradient(135deg,var(--surface-2),var(--surface-2) 12px,var(--sunken) 12px,var(--sunken) 24px); padding:24px; min-height:140px; color:var(--text-2); font-size:14px }
.shot.ph .box b{ font-family:var(--mono); font-size:12px; color:var(--text-3); direction:ltr; unicode-bidi:isolate }
.art{ display:block; width:96px; height:96px; object-fit:contain }
.art-ph{ display:flex; align-items:center; justify-content:center; width:96px; height:96px; border:1.5px dashed var(--border-strong); border-radius:var(--r-lg); font-family:var(--mono); font-size:10px; color:var(--text-3); text-align:center; padding:6px; direction:ltr }

/* ---- helpful + support ---- */
.helpful{ margin-top:36px; padding-top:20px; border-block-start:1px solid var(--border); display:flex; flex-wrap:wrap; align-items:center; gap:12px }
.helpful p{ margin:0; font-weight:600 }
.helpful .q{ display:flex; flex-wrap:wrap; align-items:center; gap:12px }
[hidden]{ display:none!important }
.btn{ display:inline-flex; align-items:center; gap:8px; height:36px; padding-inline:14px; border-radius:var(--r-md); border:1px solid var(--border-strong); background:var(--surface); color:var(--text); font:inherit; font-size:14px; cursor:pointer; text-decoration:none }
.btn:hover{ background:var(--sunken); color:var(--text) }
.btn.primary{ background:var(--primary); border-color:var(--primary); color:var(--on-primary) }
.btn.primary:hover{ background:var(--primary-hover); color:var(--on-primary) }
.btn.wa{ background:#1F8A4C; border-color:#1F8A4C; color:#fff }
.btn.wa:hover{ background:#18703D; color:#fff }
.helpful .thanks{ color:var(--ok); font-weight:500 }
.support{ margin-top:24px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 20px }
.support h2{ font-size:16px; margin:0 0 4px }
.support p{ margin:0; color:var(--text-2); font-size:14px; max-width:60ch }
.related{ margin-top:28px }
.related h2{ font-size:16px }
.related ul{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:8px }
.related li{ margin:0 }
.related a{ display:block; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-md); text-decoration:none; color:var(--text); background:var(--surface) }
.related a:hover{ border-color:var(--primary) }

/* ---- home ---- */
.hero{ background:var(--surface); border-block-end:1px solid var(--border); padding-block:56px 48px; text-align:center }
.hero h1{ font-size:40px; margin:0 0 10px; letter-spacing:-.02em; background:var(--kv-gradient); -webkit-background-clip:text; background-clip:text; color:transparent }
html[lang=ar] .hero h1,html[lang=ur] .hero h1{ letter-spacing:0; line-height:1.5 }
.hero p{ color:var(--text-2); font-size:17px; margin:0 auto 24px; max-width:60ch }
.hero .bigsearch{ max-width:620px; margin:0 auto; position:relative; text-align:start }
.hero .bigsearch input{ width:100%; height:52px; font:inherit; font-size:16px; border:1px solid var(--border-strong); border-radius:var(--r-lg); padding-inline:48px 16px; background:var(--surface) url("search.svg") no-repeat; background-size:20px; background-position:16px 50%; box-shadow:var(--shadow-1) }
html[dir=rtl] .hero .bigsearch input{ background-position:calc(100% - 16px) 50% }
.hero .bigsearch input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgb(5 150 105 / .18) }
.hero .hint{ font-size:13px; color:var(--text-3); margin-top:10px }
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin:32px 0 }
.card{ display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; text-decoration:none; color:var(--text); transition:border-color .16s,box-shadow .16s }
.card:hover{ border-color:var(--primary); box-shadow:var(--shadow-2); color:var(--text) }
.card .art,.card .art-ph{ width:56px; height:56px; flex:none }
.card .art-ph{ font-size:8px }
.card h2,.card h3{ font-size:16px; margin:0 0 4px }
.card p{ margin:0; color:var(--text-2); font-size:14px }
.card small{ color:var(--text-3); font-size:12px }
h2.band{ font-size:22px; margin:40px 0 4px }
p.band{ color:var(--text-2); margin:0 0 8px }
.fam{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); margin:22px 0 10px; font-weight:600 }
html[lang=ar] .fam,html[lang=ur] .fam{ text-transform:none; letter-spacing:0; font-size:13px }
.apps{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px }
.app{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); text-decoration:none; color:var(--text); font-weight:500 }
.app:hover{ border-color:var(--accent,var(--primary)); color:var(--text) }
.tile{ flex:none; width:32px; height:32px; border-radius:8px; background:var(--accent,var(--primary)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; overflow:hidden }
.tile img{ width:32px; height:32px; object-fit:cover; background:#fff }
.app small{ display:block; color:var(--text-3); font-weight:400; font-size:12px }
.list{ list-style:none; padding:0; margin:16px 0; display:grid; gap:10px }
.list a{ display:block; padding:14px 16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); text-decoration:none; color:var(--text) }
.list a:hover{ border-color:var(--primary) }
.list b{ display:block; font-weight:600 }
.list span{ color:var(--text-2); font-size:14px }
.list .badge{ margin-inline-start:8px; vertical-align:middle }

/* ---- errors ---- */
.errfilter{ position:sticky; top:61px; z-index:5; background:var(--surface); padding:12px 0; margin:0 0 8px; border-block-end:1px solid var(--border) }
.errfilter input{ width:100%; height:42px; font:inherit; border:1px solid var(--border-strong); border-radius:var(--r-md); padding-inline:12px }
.err{ border-block-start:1px solid var(--border); padding-block:16px 8px }
.err h3{ font-size:17px; margin:0 0 6px }
.err h3 .codes{ display:block; font-family:var(--mono); font-size:12px; color:var(--text-3); font-weight:500; margin-bottom:2px; direction:ltr; unicode-bidi:isolate; text-align:start }
.err h3 .codes a{ color:inherit; text-decoration:none }
.err:target{ background:color-mix(in srgb,var(--primary) 5%,white); outline:2px solid color-mix(in srgb,var(--primary) 30%,white); outline-offset:8px; border-radius:4px }
.err .anchor{ display:block; position:relative; top:-80px; visibility:hidden }
.err .staff{ color:var(--text-3); font-size:14px }
.err-retired{ margin-block-start:32px; border-block-start:1px solid var(--border); padding-block-start:12px }
.err-retired > summary{ cursor:pointer; font-weight:600; font-size:17px; color:var(--text-2, inherit) }
.err-retired[open] > summary{ margin-block-end:8px }
.area-intro{ color:var(--text-2) }

/* ---- footer ---- */
.foot{ border-block-start:1px solid var(--border); background:var(--surface); padding-block:28px; font-size:13px; color:var(--text-3) }
.foot .wrap{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center }
.foot a{ color:var(--text-2); text-decoration:none }
.foot a:hover{ color:var(--primary) }
.foot nav{ display:flex; flex-wrap:wrap; gap:14px }

/* ---- responsive ---- */
@media (max-width:1180px){
  .page{ grid-template-columns:220px minmax(0,1fr) }
  .toc{ display:none }
}
@media (max-width:860px){
  .page,.page.no-toc{ grid-template-columns:minmax(0,1fr); gap:16px; padding-block:16px 40px }
  .side nav{ position:static; max-height:none }
  .side details summary{ display:block }
  .side details:not([open]) .side-body{ display:none }
  .side details{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:4px 14px }
  .topnav a.opt{ display:none }
  .article{ padding:20px 18px; border-radius:var(--r-md) }
  .article h1{ font-size:24px }
  .hero{ padding-block:36px 32px }
  .hero h1{ font-size:30px }
}
@media (max-width:640px){
  .top .wrap{ flex-wrap:wrap; gap:8px 10px; padding-block:8px }
  .brand img{ width:96px }
  .topsearch{ order:3; flex-basis:100%; max-width:none }
  .topnav{ gap:2px }
  .topnav a{ padding:6px 8px }
  .errfilter{ top:0; position:static }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; scroll-behavior:auto!important } }
@media print{ .top,.side,.toc,.helpful,.support,.foot,.related{ display:none } .page{ display:block } .article{ border:0; padding:0 } }
.article .crumbs ol{ padding:0 }
.article ul.list{ padding:0 }
.article .list li{ max-width:none }
#search-page-form{ display:flex; gap:8px; margin:0 0 8px }
#search-page-form input{ flex:1; height:42px; font:inherit; border:1px solid var(--border-strong); border-radius:var(--r-md); padding-inline:12px }
#search-page-form input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgb(5 150 105 / .18) }
#search-page-form .btn{ height:42px }
.art-gap{ display:none }
