/* Behalf HR — light navy and steel by default; dark mode is black and silver.
   Layout: corporate one-pager with a live "monthly report" hero, dense two-column bands. */
:root{
  --bg:#FFFFFF; --bg-soft:#F3F5F8; --surface:#FFFFFF; --band:#0F1E33; --band-head:#FFFFFF; --band-text:#C9D3E0; --band-label:#B7C2D0; --band-line:rgba(255,255,255,.14);
  --ink:#0F1E33; --ink-2:#1F3A5F; --text:#2E3A4B; --muted:#56627A; --line:#DEE3EA; --line-strong:#C5CDD8; --steel:#5E7491;
  --g1:#1F3A5F; --g2:#5E7491; --g3:#24406A;
  --btn-a:#24406A; --btn-b:#0F1E33; --on-btn:#FFFFFF;
  --ok:#17734A; --ok-bg:#E6F3EC; --warn:#8A5A00; --warn-bg:#FBF0DA; --err:#B42318;
  --mark-top:#0F1E33; --mark-1:#55698A; --mark-2:#9AAAC0; --mark-3:#647A97;
  --header-bg:rgba(255,255,255,.92); --shadow:rgba(15,30,51,.18);
  --wa:#1FA855; --wa-dark:#14753B;
  --font-display:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --font-label:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --font-brand:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  color-scheme:light;
}
html[data-mode="dark"]{
  --bg:#0B0C0E; --bg-soft:#111316; --surface:#16191E; --band:#16191E; --band-head:#FFFFFF; --band-text:#BCC3CC; --band-label:#D7DCE2; --band-line:rgba(255,255,255,.10);
  --ink:#F2F4F7; --ink-2:#DDE2E8; --text:#C9CFD6; --muted:#9AA3AE; --line:#262A31; --line-strong:#3A3F47; --steel:#AEB6C0;
  --g1:#9AA0A8; --g2:#F4F6F8; --g3:#A3A9B1;
  --btn-a:#F4F6F8; --btn-b:#A9AFB7; --on-btn:#0B0C0E;
  --ok:#57C990; --ok-bg:#14281E; --warn:#E3B457; --warn-bg:#2A2213; --err:#F97066;
  --mark-top:#FFFFFF; --mark-1:#8C929A; --mark-2:#F4F6F8; --mark-3:#A3A9B1;
  --header-bg:rgba(11,12,14,.9); --shadow:rgba(0,0,0,.55);
  color-scheme:dark;
}
html[lang="ar"]{--font-display:'IBM Plex Sans Arabic',Tahoma,sans-serif;--font-body:'IBM Plex Sans Arabic',Tahoma,sans-serif;--font-label:'IBM Plex Sans Arabic',Tahoma,sans-serif}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;transition:background-color .3s ease,color .3s ease}
html[lang="ar"] body{font-size:17px;line-height:1.75}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--bg)}
img,svg{max-width:100%}
a{color:var(--ink-2)}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);text-wrap:balance;margin:0}
p{margin:0}
[hidden]{display:none!important}
.skip{position:absolute;inset-inline-start:-9999px;top:8px;z-index:60;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px}
.skip:focus{inset-inline-start:12px}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.band{padding-block:88px}
.band.soft{background:var(--bg-soft);border-block:1px solid var(--line)}
.band.deep{background:var(--band);color:var(--band-text)}
.band.deep h2,.band.deep h3{color:var(--band-head)}
.eyebrow{font-family:var(--font-label);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
html[lang="ar"] .eyebrow{letter-spacing:0;font-size:14px;font-weight:600;text-transform:none}
.band.deep .eyebrow{color:var(--band-label)}
.h2{font-size:clamp(24px,2.4vw + 14px,42px);line-height:1.16;letter-spacing:-.02em;font-weight:700}
html[lang="ar"] .h2,html[lang="ar"] h1{letter-spacing:0;line-height:1.35}
.lead{font-size:clamp(16px,.4vw + 14.5px,18px);color:var(--muted);max-width:62ch}
.band.deep .lead{color:var(--band-text)}
.metal{background:linear-gradient(100deg,var(--g1) 0%,var(--g2) 48%,var(--g3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.rule{width:72px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--g1),var(--mark-2),var(--g1));transform-origin:left center}
html[dir="rtl"] .rule{transform-origin:right center}
.head{display:flex;flex-direction:column;gap:14px;margin-bottom:44px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:var(--font-body);transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px var(--shadow)}
.btn-primary{background:linear-gradient(135deg,var(--btn-a),var(--btn-b));color:var(--on-btn)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--bg-soft)}
.btn-wa{background:transparent;color:var(--ink);border-color:var(--wa)}
.btn-wa::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--wa)}
.btn-wa:hover{background:var(--bg-soft)}
.btn-sm{min-height:40px;padding:0 18px;font-size:14px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--steel);outline-offset:2px}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:12px;min-width:0;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.card.lift:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 18px 36px -26px var(--shadow)}
.card h3{font-size:19px;font-weight:700}
.card p{color:var(--muted);font-size:15px}
.ticks{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:var(--text)}
.ticks li{display:flex;gap:10px;align-items:flex-start}
.ticks li::before{content:"";flex:none;width:14px;height:14px;margin-top:5px;background:currentColor;color:var(--ink-2);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 9.5 17 19 7' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 9.5 17 19 7' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.ticks.ok li::before{color:var(--ok);width:18px;height:18px;margin-top:3px}
.icon{width:44px;height:44px;border-radius:12px;background:var(--bg-soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-2)}

/* wordmark: the B mark is set as the first letter of "Behalf" */
.wordmark{display:inline-flex;align-items:baseline;font-family:var(--font-brand);font-weight:800;letter-spacing:-.025em;color:var(--ink);text-decoration:none;line-height:1;direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.wordmark .b{height:.78em;width:auto;margin-inline-end:.05em;align-self:baseline;overflow:visible}
.wordmark .hr{font-weight:500;color:var(--steel);margin-inline-start:.24em;letter-spacing:0}

/* header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:transparent;border-bottom:1px solid transparent;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease,transform .45s cubic-bezier(.2,.7,.2,1),opacity .4s ease,filter .4s ease}
.site-header.hide{transform:translateY(-100%);opacity:0;filter:blur(6px);pointer-events:none}
.site-header.solid,.site-header.scrolled{background:var(--header-bg);border-bottom-color:var(--line);-webkit-backdrop-filter:saturate(1.3) blur(10px);backdrop-filter:saturate(1.3) blur(10px)}
.site-header.scrolled{box-shadow:0 8px 24px -20px var(--shadow)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.site-header .wordmark{font-size:27px}
.nav-links{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:600}
.nav-links a{color:var(--text);text-decoration:none;position:relative;padding-block:6px}
.nav-links a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--ink);transform:scaleX(0);transition:transform .25s ease}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.actions{display:flex;align-items:center;gap:10px}
.chip-btn{min-height:40px;min-width:40px;padding:0 12px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);font-weight:700;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;font-family:var(--font-body)}
.chip-btn:hover{background:var(--bg-soft)}
.chip-btn .ar-glyph{font-family:'IBM Plex Sans Arabic',Tahoma,sans-serif;font-size:16px;line-height:1}
.chip-btn .en-glyph{font-family:'Manrope',sans-serif}
.theme-btn .moon{display:block}.theme-btn .sun{display:none}
html[data-mode="dark"] .theme-btn .moon{display:none}html[data-mode="dark"] .theme-btn .sun{display:block}
.menu-btn{display:none}
.mobile-panel{border-top:1px solid var(--line);background:var(--header-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mobile-panel .wrap{display:flex;flex-direction:column;gap:6px;padding-block:14px 22px}
.mobile-panel a.m-link{color:var(--ink);text-decoration:none;font-weight:600;font-size:17px;padding-block:12px;border-bottom:1px solid var(--line)}
.mobile-panel .row-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
@media (max-width:980px){
  .nav-links,.actions .cta{display:none}
  .menu-btn{display:inline-flex}
  .actions{gap:6px}
  .actions .lang-desk,.actions .theme-desk{min-height:36px;min-width:36px;padding:0 8px;font-size:13px}
  .actions .theme-desk svg{width:16px;height:16px}
  .site-header .wordmark{font-size:24px}
  .site-header .bar{min-height:64px}
}

/* hero */
.hero{padding-block:56px 80px;background:linear-gradient(180deg,var(--bg-soft) 0%,var(--bg) 100%);border-bottom:1px solid var(--line);margin-top:-73px;padding-top:129px}
.hero .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:56px;align-items:center}
.hero h1{font-size:clamp(30px,4.4vw + 10px,60px);line-height:1.05;letter-spacing:-.035em;font-weight:800}
html[lang="ar"] .hero h1{line-height:1.3;font-weight:700;font-size:clamp(28px,4vw + 10px,54px)}
.hero-copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.hero-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px 20px;font-size:15px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.report{margin:0;background:var(--surface);border:1px solid var(--line-strong);border-radius:20px;box-shadow:0 28px 56px -32px var(--shadow);overflow:hidden;min-width:0}
.report-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line);background:var(--bg-soft)}
.report-head h2{font-size:16px;font-weight:700}
.tag{font-family:var(--font-label);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted);background:var(--surface)}
html[lang="ar"] .tag{letter-spacing:0;font-size:12px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.kpi{padding:16px 22px;border-inline-end:1px solid var(--line);min-width:0}
.kpi:last-child{border-inline-end:0}
.kpi small{display:block;font-size:12px;color:var(--muted)}
.kpi b{display:block;overflow-wrap:anywhere;font-family:var(--font-display);font-size:clamp(16px,1.2vw + 11px,22px);color:var(--ink);font-variant-numeric:tabular-nums}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
th{font-family:var(--font-label);font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:start;padding:12px 22px;border-bottom:1px solid var(--line);white-space:nowrap}
html[lang="ar"] th{letter-spacing:0;font-size:12.5px;font-weight:600}
td{padding:12px 22px;border-bottom:1px solid var(--line);white-space:nowrap;color:var(--text)}
tr:last-child td{border-bottom:0}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;transition:background-color .35s ease,color .35s ease}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
@media (max-width:560px){.kpi{padding:12px 14px}.report-head{padding:16px 14px}th,td{padding:10px 14px}td:first-child{white-space:normal;min-width:130px}.report-foot{padding:12px 14px}}
.report-foot{padding:14px 22px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);background:var(--bg-soft)}

.strip{padding-block:24px;border-bottom:1px solid var(--line)}
.strip .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-weight:600;color:var(--ink);font-size:15px}
.strip .dot{color:var(--line-strong)}

.compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px}
.compare .us{border:2px solid var(--ink-2)}
.row{display:flex;justify-content:space-between;gap:16px;padding-block:11px;border-bottom:1px solid var(--line);font-size:15px}
.row:last-child{border-bottom:0}
.row > span:last-child{font-weight:600;color:var(--ink);text-align:end}

.law{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:1px;background:var(--band-line);border:1px solid var(--band-line);border-radius:16px;overflow:hidden}
.law > div{background:var(--band);padding:26px;display:flex;flex-direction:column;gap:8px}
.law .label{font-family:var(--font-label);font-size:12px;color:var(--band-label);letter-spacing:.04em}
html[lang="ar"] .law .label{font-size:13.5px;letter-spacing:0;font-weight:600}
.law h3{font-size:17px}
.law p{font-size:14.5px;color:var(--band-text)}

.month{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}
.month > div{padding:22px;border-inline-end:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.month > div:last-child{border-inline-end:0}
.month .label{font-family:var(--font-label);font-size:12px;color:var(--steel);letter-spacing:.06em}
html[lang="ar"] .month .label{font-size:13.5px;letter-spacing:0;font-weight:600}
.month b{font-family:var(--font-display);color:var(--ink);font-size:16px}
.month p{font-size:14px;color:var(--muted)}
.num{font-family:var(--font-label);font-size:13px;color:var(--steel)}
html[lang="ar"] .num{font-weight:600;font-size:14px}
.sub-h{font-size:20px;margin:52px 0 16px}
.roles .card{background:var(--bg-soft)}
.who{font-family:var(--font-label);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
html[lang="ar"] .who{letter-spacing:0;font-size:14px;font-weight:600;text-transform:none}

.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:44px;align-items:center}
.split.top{align-items:start}
.split .head{margin:0}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips span{padding:10px 16px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);font-weight:600;font-size:14.5px;color:var(--ink)}

.price .card{gap:14px}
.amount{font-family:var(--font-brand);font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
html[lang="ar"] .amount{font-family:var(--font-display);letter-spacing:0}
.amount small{display:block;font-family:var(--font-body);font-size:13.5px;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:4px}
.price .featured{border:2px solid var(--ink-2);box-shadow:0 22px 44px -30px var(--shadow)}
.badge{align-self:flex-start;font-size:12px;font-weight:700;background:var(--ink);color:var(--bg);padding:4px 12px;border-radius:999px}
.price .btn{margin-top:auto}
.terms{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px 32px;padding:18px 24px;border:1px dashed var(--line-strong);border-radius:14px;font-size:15px;background:var(--surface)}
.terms b{color:var(--ink)}

.teaser{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:40px;align-items:center;background:var(--surface);border:1px solid var(--line-strong);border-radius:24px;padding:40px}
.calc-mini{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:16px;background:var(--bg-soft);border:1px solid var(--line)}
.calc-mini .row{font-size:14.5px}
.calc-mini .big{font-family:var(--font-brand);font-size:32px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}

.referral{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:32px;align-items:center;padding:40px;border-radius:24px;background:var(--surface);border:1px solid var(--line)}
.referral .steps-mini{display:grid;gap:12px;counter-reset:r;margin:0;padding:0;list-style:none}
.referral .steps-mini li{display:flex;gap:14px;align-items:flex-start;font-size:15.5px;color:var(--text)}
.referral .steps-mini li::before{counter-increment:r;content:counter(r);flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--ink);font-size:14px}

.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:0 44px}
details{border-top:1px solid var(--line);padding-block:18px}
details.last{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;font-weight:700;color:var(--ink);font-size:16.5px;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:'IBM Plex Mono',monospace;color:var(--steel);font-size:20px;line-height:1;transition:transform .25s ease}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:10px;color:var(--muted);font-size:15px}

.contact-box{display:flex;flex-direction:column;gap:16px;padding:24px;border:1px solid var(--line-strong);border-radius:16px;background:var(--surface)}
.contact-box div{display:flex;flex-direction:column;gap:2px}
.contact-box small{font-family:var(--font-label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
html[lang="ar"] .contact-box small{letter-spacing:0;font-size:13px;font-weight:600}
.contact-box .val{color:var(--ink);font-weight:700;font-size:17px;user-select:all;direction:ltr;unicode-bidi:isolate;text-align:start}
.contact-box .plain{color:var(--ink);font-weight:600}
.lead-form{background:var(--surface);border:1px solid var(--line-strong);border-radius:20px;padding:30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;min-width:0;box-shadow:0 28px 56px -40px var(--shadow)}
.lead-form .full{grid-column:1/-1}
.lead-form h3{font-size:21px}
label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
label .opt{font-weight:500;color:var(--muted)}
input,select,textarea{font-family:var(--font-body);font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--line-strong);border-radius:12px;padding:12px 14px;min-height:48px;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--ink-2)}
textarea{min-height:96px;resize:vertical}
.hp{position:absolute!important;inset-inline-start:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-note{font-size:13px;color:var(--muted)}
.form-msg{font-size:14.5px;font-weight:600;padding:12px 14px;border-radius:12px}
.form-msg.ok{background:var(--ok-bg);color:var(--ok)}
.form-msg.err{background:var(--warn-bg);color:var(--warn)}

/* calculator page */
.page-hero{padding-block:120px 48px;margin-top:-73px;background:linear-gradient(180deg,var(--bg-soft) 0%,var(--bg) 100%);border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(28px,3.6vw + 12px,54px);line-height:1.08;letter-spacing:-.03em;font-weight:800}
.crumbs{font-size:14px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--muted)}
.calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px;align-items:start}
.calc-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px}
.calc-form .full{grid-column:1/-1}
.calc-result{background:var(--band);color:var(--band-text);border-radius:20px;padding:32px;display:flex;flex-direction:column;gap:18px;min-width:0}
.calc-result h2{color:var(--band-head);font-size:18px}
.calc-result .big{font-family:var(--font-brand);font-size:clamp(36px,5vw,52px);font-weight:800;color:var(--band-head);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.05;direction:ltr;unicode-bidi:isolate;text-align:start}
.calc-result .row{border-bottom-color:var(--band-line);font-size:15px}
.calc-result .row > span:last-child{color:var(--band-head)}
.calc-result .note{font-size:13.5px;color:var(--band-text)}
.calc-result .btn-primary{background:var(--bg);color:var(--ink)}
.example-tag{align-self:flex-start;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--warn-bg);color:var(--warn)}
.rules{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.rules li{padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.rules b{color:var(--ink)}

/* legal pages */
.legal-body{max-width:780px}
.legal-body h2{font-size:22px;margin:40px 0 12px}
.legal-body p,.legal-body li{color:var(--text);font-size:16px}
.legal-body p+p{margin-top:12px}
.legal-body ul{padding-inline-start:22px;display:flex;flex-direction:column;gap:6px;margin:10px 0 0}
.legal-meta{font-size:14px;color:var(--muted)}

/* footer */
footer{background:var(--bg-soft);border-top:1px solid var(--line);font-size:14px;color:var(--muted);padding-bottom:84px}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:32px;padding-block:60px 32px}
footer h4{margin:0 0 12px;font-family:var(--font-label);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
html[lang="ar"] footer h4{letter-spacing:0;font-size:14.5px;font-weight:700;text-transform:none}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink)}
footer .wordmark{font-size:26px}
footer .slogan{color:var(--ink);font-weight:600}
.ltr{direction:ltr;unicode-bidi:isolate}
footer .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;border-top:1px solid var(--line);padding-block:20px 0}

/* floating WhatsApp: bottom right in English, bottom left in Arabic */
.wa-float{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));right:calc(20px + env(safe-area-inset-right,0px));z-index:35;display:flex;align-items:center;gap:10px;text-decoration:none;flex-direction:row}
html[dir="rtl"] .wa-float{right:auto;left:calc(20px + env(safe-area-inset-left,0px));flex-direction:row-reverse}
.wa-float .bubble{width:54px;height:54px;border-radius:50%;background:var(--surface);color:var(--wa);border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -12px var(--shadow);transition:transform .2s ease,background-color .2s ease}
.wa-float:hover .bubble{transform:scale(1.06);background:var(--bg-soft)}
@media (max-width:640px){.wa-float .bubble{width:50px;height:50px}.wa-float .bubble svg{width:26px;height:26px}}
.wa-float .label{background:var(--ink);color:var(--bg);font-size:14px;font-weight:700;padding:9px 14px;border-radius:999px;box-shadow:0 10px 24px -10px var(--shadow);opacity:0;transform:translateX(8px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
html[dir="rtl"] .wa-float .label{transform:translateX(-8px)}
.wa-float:hover .label,.wa-float:focus-visible .label,.wa-float.hint .label{opacity:1;transform:none}
.wa-float.pulse .bubble{animation:pulse 1.4s ease-out 1}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,168,85,.35)}100%{box-shadow:0 0 0 18px rgba(31,168,85,0)}}
@media (max-width:640px){.wa-float .label{display:none}}

/* motion: content is visible without JS; html.js enables the entrance states */
html.js .reveal{opacity:0;transform:translateY(18px);filter:blur(6px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease;transition-delay:calc(var(--i,0) * 90ms)}
html.js .reveal.in{opacity:1;transform:none;filter:none}
html.js .rule.reveal{transform:scaleX(0);filter:none;opacity:1;transition:transform .9s cubic-bezier(.2,.7,.2,1) .15s}
html.js .rule.reveal.in{transform:scaleX(1)}
html.js [data-dissolve] .w{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(8px);animation:dissolve .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(120ms + var(--wi) * 70ms)}
@keyframes dissolve{to{opacity:1;filter:blur(0);transform:none}}
html.js .hero-fade{opacity:0;transform:translateY(12px);animation:fadeup .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,.5s)}
@keyframes fadeup{to{opacity:1;transform:none}}
html.js .report tbody tr.pre{opacity:0;transform:translateY(6px)}
.report tbody tr{transition:opacity .45s ease,transform .45s ease}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal,html.js [data-dissolve] .w,html.js .hero-fade,html.js .report tbody tr.pre{opacity:1!important;transform:none!important;filter:none!important;animation:none!important;transition:none!important}
  html.js .rule.reveal{transform:none!important}
  .btn,.card,.wa-float .bubble{transition:none}
  .site-header{transition:none;filter:none!important}
  .wa-float.pulse .bubble{animation:none}
}
section[id]{scroll-margin-top:88px}