:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#F2F4F1; --surface:#FFFFFF; --ink:#152530; --soft:#4E606C;
  --blue:#1B4BA0; --blue-weak:#E7EDF8; --amber:#8F5411; --amber-weak:#FBF0E0;
  --green:#1D6248; --green-weak:#E4F0EA; --rule:#D8DDD7; --focus:#1B4BA0;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F161A; --surface:#171F24; --ink:#E6EDEA; --soft:#9BA9B0;
    --blue:#8CB0F0; --blue-weak:#1B2A3D; --amber:#E1A96A; --amber-weak:#2C2318;
    --green:#74C6A0; --green-weak:#152A22; --rule:#26333A; --focus:#8CB0F0;
  }
}
:root[data-theme="dark"]{
  --bg:#0F161A; --surface:#171F24; --ink:#E6EDEA; --soft:#9BA9B0;
  --blue:#8CB0F0; --blue-weak:#1B2A3D; --amber:#E1A96A; --amber-weak:#2C2318;
  --green:#74C6A0; --green-weak:#152A22; --rule:#26333A; --focus:#8CB0F0;
}
*,*::before,*::after{box-sizing:inherit}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 1rem)}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:17px; line-height:1.62; letter-spacing:-0.005em;}
html[dir="rtl"] body{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,Arial,sans-serif}
.wrap{width:100%; max-width:44rem; margin:0 auto; padding:0 1.25rem}
h1,h2,h3{line-height:1.2; letter-spacing:-0.02em; margin:0 0 .5rem}
h1{font-size:clamp(1.9rem,6vw,2.6rem); font-weight:700}
h2{font-size:clamp(1.35rem,4.2vw,1.7rem); font-weight:600}
h3{font-size:1.05rem; font-weight:600}
p{margin:0 0 1rem; max-width:64ch}
a{color:var(--blue)}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:2px}
hr{border:0; border-top:1px solid var(--rule); margin:2.5rem 0}
.note{font-size:.88rem; color:var(--soft)}

.top{background:var(--surface); border-bottom:1px solid var(--rule)}
.top-in{display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:center; justify-content:space-between; padding-top:.9rem; padding-bottom:.9rem}
.brand{font-weight:600; font-size:1.02rem; text-decoration:none; color:var(--ink)}
.brand span{color:var(--blue)}
.disclaimer{font-size:.82rem; color:var(--soft); width:100%; order:3; margin:0}

.topnav{background:var(--surface); border-bottom:1px solid var(--rule);
  position:sticky; top:env(safe-area-inset-top,0px); z-index:30}
.navrow{display:flex; flex-wrap:wrap; gap:.3rem; padding:.5rem 0}
.navdrop{flex:1 1 9rem}
.navdrop summary{list-style:none; cursor:pointer; font-size:.86rem; font-weight:500; text-align:center;
  padding:.55rem .6rem; border-radius:5px; color:var(--ink)}
.navdrop summary::-webkit-details-marker{display:none}
.navdrop[open] summary{background:var(--blue-weak); color:var(--blue)}
.navdrop ul{list-style:none; margin:.35rem 0 .5rem; padding:0; display:grid; gap:.25rem}
.navdrop a{display:block; padding:.55rem .7rem; border-radius:5px; font-size:.88rem;
  text-decoration:none; color:var(--ink); background:var(--bg)}
.navdrop a:hover{background:var(--blue-weak); color:var(--blue)}

[hidden]{display:none !important}

.hero{padding:2.75rem 0 1.5rem}
.lead{font-size:1.12rem; color:var(--soft); max-width:58ch}
.urgent{background:var(--amber-weak); color:var(--amber); border-radius:5px; padding:.8rem 1rem; font-size:.95rem; margin:1.25rem 0 0}
.urgent b{font-weight:600}

.cases{list-style:none; margin:1.25rem 0 0; padding:0; display:grid; gap:.6rem}
.cases a{display:block; text-decoration:none; color:inherit; background:var(--surface);
  border:1px solid var(--rule); border-inline-start:3px solid var(--blue); border-radius:6px; padding:.85rem 1rem}
.cases a:hover{border-color:var(--blue)}
.cases strong{display:block; font-weight:600; color:var(--blue); margin-bottom:.15rem}
.cases span{font-size:.92rem; color:var(--soft)}
.back-link{font-size:.88rem; margin:0 0 1rem}
.back-link a{text-decoration:none; color:var(--soft)}
.back-link a:hover{color:var(--blue)}

article{padding:2.5rem 0 .5rem; scroll-margin-top:1rem}
article h2{margin-bottom:.75rem}
.snabbsvar{background:var(--green-weak); border-radius:6px; padding:1rem 1.1rem; margin:0 0 1.25rem}
.snabbsvar .lbl{font-size:.78rem; font-weight:600; color:var(--green); margin:0 0 .3rem}
.snabbsvar p{margin:0; font-weight:500}
article h3{margin-top:1.5rem}
.tline{background:var(--surface); border:1px solid var(--rule); border-radius:6px; padding:1rem; margin:0 0 1rem; font-size:.92rem}
.tline div{padding:.3rem 0; border-bottom:1px solid var(--rule)}
.tline div:last-child{border:0}
.tline b{font-weight:600}
.src{font-size:.85rem; color:var(--soft); border-top:1px solid var(--rule); padding-top:.75rem; margin-top:1.5rem}

.btn{display:inline-block; font:inherit; font-weight:600; text-decoration:none; cursor:pointer;
  background:var(--blue); color:#fff; border:1px solid var(--blue); border-radius:5px; padding:.7rem 1.1rem}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn:not(.ghost){color:#0F161A}}
:root[data-theme="dark"] .btn:not(.ghost){color:#0F161A}
.btn.ghost{background:transparent; color:var(--blue)}
.btn-row{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.25rem}

section{padding:2.25rem 0}
.sec-intro{color:var(--soft); max-width:58ch}
.card{background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:1.25rem}
fieldset{border:0; margin:0; padding:0}
legend{font-weight:600; padding:0; margin-bottom:.75rem}
label{display:block; font-size:.9rem; font-weight:500; margin-bottom:.3rem}
select,input[type="number"]{font:inherit; width:100%; padding:.6rem .7rem; color:var(--ink);
  background:var(--bg); border:1px solid var(--rule); border-radius:5px}
.field{margin-bottom:1rem}
.check{display:flex; gap:.5rem; align-items:flex-start; font-size:.9rem; color:var(--soft)}
.check input{margin-top:.28rem}
.sum{margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--rule)}
.total{font-size:2rem; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-0.03em}
.breakdown{width:100%; border-collapse:collapse; font-size:.9rem; margin-top:.75rem}
.breakdown td{text-align:start; padding:.35rem 0; border-bottom:1px solid var(--rule); color:var(--soft)}
.breakdown td:last-child{text-align:end; font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto}

ol.steps{list-style:none; margin:1.25rem 0 0; padding:0}
ol.steps li{position:relative; padding:0 0 1.25rem 3rem; border-inline-start:1px solid var(--rule); margin-inline-start:.9rem}
html[dir="rtl"] ol.steps li{padding:0 3rem 1.25rem 0}
ol.steps li:last-child{border-color:transparent; padding-bottom:0}
.num{position:absolute; inset-inline-start:-.9rem; top:0; width:1.8rem; height:1.8rem; border-radius:50%;
  background:var(--blue-weak); color:var(--blue); display:grid; place-items:center;
  font-size:.9rem; font-weight:600; font-variant-numeric:tabular-nums}
ol.steps p{margin:0}

.faq details{border-bottom:1px solid var(--rule); padding:.9rem 0}
.faq summary{cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--blue); font-weight:600; flex:none}
.faq details[open] summary::after{content:"–"}
.faq .body{padding-top:.75rem}
.faq .body p{margin:0 0 .85rem}
.faq .body p:last-child{margin-bottom:0}
.faq .body ul{margin:0 0 .85rem; padding-inline-start:1.1rem}
.faq .body ul:last-child{margin-bottom:0}

footer{background:var(--surface); border-top:1px solid var(--rule); padding:2rem 0; font-size:.88rem; color:var(--soft)}
footer ul{padding-inline-start:1.1rem; margin:.5rem 0 1rem}
@media (prefers-reduced-motion:no-preference){.choice,.cases a{transition:border-color .15s ease}}

.breadcrumb{font-size:.82rem; color:var(--soft); padding-top:1.25rem; margin-bottom:-.5rem}
.breadcrumb a{color:var(--soft); text-decoration:none}
.breadcrumb a:hover{color:var(--blue)}
.breadcrumb span{color:var(--ink)}

.glossary{margin:1.5rem 0 0; padding:0}
.glossary dt{font-weight:600; color:var(--ink); margin-top:1.1rem}
.glossary dt:first-child{margin-top:0}
.glossary dd{margin:.25rem 0 0; color:var(--soft); max-width:64ch}