/* تستاهل — testahil.style
   Palette: paper #F6F8F7 / ink #0E2726 / teal #1B5E5E / teal2 #2A8F8F / amber #C98A2D */
:root{
  --paper:#F6F8F7; --ink:#0E2726; --teal:#1B5E5E; --teal2:#2A8F8F;
  --line:#D9E4E2; --muted:#5B7270; --amber:#C98A2D; --red:#B5483A; --green:#2E7D5B;
  --card:#FFFFFF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:17px; line-height:1.75;
}
.num,.mono{font-family:"IBM Plex Mono",monospace; font-feature-settings:"tnum"; direction:ltr; unicode-bidi:embed}
h1,h2,h3,.display{font-family:"Alexandria","IBM Plex Sans",sans-serif; line-height:1.25; margin:0 0 .5em}
h1{font-weight:800} h2{font-weight:700; font-size:1.5rem} h3{font-weight:600; font-size:1.1rem}
a{color:var(--teal); text-decoration:none} a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:3px solid var(--teal2); outline-offset:2px; border-radius:4px}
.wrap{max-width:1060px; margin:0 auto; padding:0 20px}

/* nav */
.nav{position:sticky; top:0; z-index:50; background:rgba(246,248,247,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:22px; height:62px}
.brand{font-family:"Alexandria"; font-weight:800; font-size:1.35rem; color:var(--teal)}
.brand small{color:var(--muted); font-weight:400; font-size:.7em; margin-inline-start:6px}
.nav nav{display:flex; gap:18px; flex-wrap:wrap; font-size:.95rem}
.nav a.on{color:var(--ink); font-weight:600; border-bottom:2px solid var(--amber)}

/* hero */
.hero{padding:72px 0 40px; text-align:left}
.hero .q{font-size:clamp(3.2rem,9vw,6.5rem); font-weight:800; color:var(--teal); letter-spacing:-.5px}
.hero .q span{color:var(--amber)}
.hero .sub{font-size:1.25rem; max-width:640px; color:var(--ink)}
.hero .sub b{background:linear-gradient(transparent 65%, #F0E2C8 65%)}

/* cards & grid */
.grid{display:grid; gap:18px}
.g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.g3,.g2{grid-template-columns:1fr}}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px}
.card h3{color:var(--teal)}
.kicker{font-size:.8rem; letter-spacing:.06em; color:var(--amber); font-weight:600; margin-bottom:4px}
.muted{color:var(--muted); font-size:.92rem}
.chip{display:inline-block; background:#EAF2F1; color:var(--teal); border:1px solid var(--line); border-radius:999px; padding:2px 12px; font-size:.82rem; margin-inline-end:6px}
.chip.warn{background:#FBF3E4; color:#8A5E16; border-color:#EAD9B5}
.btn{display:inline-block; background:var(--teal); color:#fff; padding:10px 22px; border-radius:10px; font-weight:600; border:0; cursor:pointer; font-size:1rem}
.btn:hover{background:var(--teal2); text-decoration:none}
.btn.ghost{background:transparent; color:var(--teal); border:1.5px solid var(--teal)}

/* tables */
table{width:100%; border-collapse:collapse; font-size:.95rem}
th{font-weight:600; color:var(--muted); font-size:.85rem}
th,td{padding:9px 10px; border-bottom:1px solid var(--line); text-align:left}
td.num,th.num{text-align:left}
tr:last-child td{border-bottom:0}
.ok{color:var(--green); font-weight:600} .bad{color:var(--red); font-weight:600}

/* probability strip (signature) */
.strip{margin:14px 0}
.strip svg{width:100%; height:84px; display:block}
.strip .lbl{font-size:.82rem; color:var(--muted); display:flex; justify-content:space-between}
.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:.8rem; color:var(--muted); margin-top:6px}
.legend i{display:inline-block; width:14px; height:10px; border-radius:3px; margin-inline-start:5px; vertical-align:-1px}

/* sections / footer */
section{padding:34px 0}
.rule{border:0; border-top:1px solid var(--line); margin:10px 0 0}
footer{border-top:1px solid var(--line); margin-top:40px; padding:26px 0 40px; font-size:.85rem; color:var(--muted)}
footer b{color:var(--ink)}
.disclaimer-box{background:#FBF8F1; border:1px solid #EAD9B5; border-radius:12px; padding:16px 20px; font-size:.9rem}
input,select{font:inherit; padding:9px 12px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); width:100%}
label{font-size:.88rem; font-weight:600; display:block; margin-bottom:4px}
.field{margin-bottom:14px}