/* إرغاد — نظام التصميم ٣
   الفكرة: الخط المنقّط والهمزة هما عمود الموقع. كل اختيار يقوم به الزائر محطة على الخط، والهمزة تقف حيث هو.
   كل شيء آخر هادئ: لا بطاقات زجاجية متكررة، والفواصل خطوط رفيعة، والورق الفاتح يُستخدم لما يأخذه الزائر معه. */
:root{
  --dark:#3E2C2A; --brown:#6B4F4F; --green:#4F7A5A; --lgreen:#8DB596; --sand:#C9B3A8; --rose:#A0807A;
  --light:#F4EEEA; --ivory:#FBF8F4; --muted:#574846; --div:#E6DACB;
  --bg:var(--dark); --fg:var(--ivory); --fg2:rgba(244,238,234,.74); --fg3:rgba(244,238,234,.52);
  --rule:rgba(244,238,234,.14); --rule2:rgba(244,238,234,.26); --tint:rgba(244,238,234,.05); --tint2:rgba(244,238,234,.09);
  --accent:var(--lgreen); --path:var(--brown);
  --ruqaa:'Aref Ruqaa',serif; --sans:'Tajawal','Segoe UI',Tahoma,sans-serif;
  /* type scale */
  --t-xs:.8125rem; --t-s:.9375rem; --t-b:1.0625rem; --t-l:1.25rem; --t-h3:1.75rem;
  --t-h2:clamp(2.1rem,4.2vw,3rem); --t-h1:clamp(2.6rem,5.6vw,4.25rem); --t-d:clamp(3rem,8.2vw,6.75rem);
  /* space scale */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4.5rem; --s9:7rem;
  --r-s:12px; --r-m:20px; --r-l:28px;
  --max:1180px;
  color-scheme:dark;
}
html[data-look="light"]{
  --bg:var(--ivory); --fg:var(--dark); --fg2:rgba(62,44,42,.78); --fg3:rgba(62,44,42,.56);
  --rule:rgba(107,79,79,.16); --rule2:rgba(107,79,79,.3); --tint:rgba(107,79,79,.04); --tint2:rgba(107,79,79,.08);
  --accent:var(--green); --path:var(--sand); color-scheme:light;
}
html[data-contrast="high"]{ --fg2:var(--fg); --fg3:var(--fg); --rule:var(--rule2) }
html{font-size:100%} html[data-size="1"]{font-size:112.5%} html[data-size="2"]{font-size:125%}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:var(--t-b); line-height:1.85; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,h4,p,ol,ul{margin:0} ol,ul{padding:0; list-style:none}
a{color:inherit} button,input,select{font:inherit; color:inherit}
img{max-width:100%} [hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:8px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; right:16px; top:-60px; z-index:100; background:var(--fg); color:var(--bg); padding:10px 18px; border-radius:999px; text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:var(--max); margin-inline:auto; padding-left:max(20px,env(safe-area-inset-left,0px)); padding-right:max(20px,env(safe-area-inset-right,0px))}
.ruq{font-family:var(--ruqaa); font-weight:700; line-height:1.6}
.mk{background:linear-gradient(transparent 62%, var(--mk,var(--green)) 62%, var(--mk,var(--green)) 90%, transparent 90%); padding:0 .1em; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.lead{font-size:var(--t-l); font-weight:300; color:var(--fg2); max-width:46ch; line-height:1.9}

/* buttons: one shape, three weights */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:48px; padding:0 var(--s5); border-radius:999px; border:1.5px solid transparent; font-weight:700; font-size:var(--t-s); text-decoration:none; cursor:pointer; white-space:nowrap; transition:background .2s, border-color .2s, color .2s}
.btn-main{background:var(--green); color:var(--ivory)}
.btn-main:hover{background:#456d50}
.btn-alt{background:var(--fg); color:var(--bg)}
.btn-line{border-color:var(--rule2); color:var(--fg); background:transparent}
.btn-line:hover{border-color:var(--fg2)}
.btn[disabled]{opacity:.35; cursor:not-allowed}
.btn svg{width:20px; height:20px; flex-shrink:0}

/* ===== header ===== */
.top{position:sticky; top:0; z-index:50; background:var(--bg); padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:flex; align-items:center; gap:var(--s4); height:72px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0}
.logo svg{height:34px; width:auto}
.logo span{font-size:1.55rem; font-weight:300; line-height:1}
.nav{display:flex; gap:var(--s1); margin-inline:auto}
.nav a{padding:var(--s2) var(--s3); border-radius:999px; text-decoration:none; font-size:var(--t-s); font-weight:500; color:var(--fg2)}
.nav a:hover{color:var(--fg)}
.nav a[aria-current="page"]{color:var(--fg); background:var(--tint2)}
.top-tools{display:flex; align-items:center; gap:var(--s2); flex-shrink:0}
.icon-btn{width:44px; height:44px; border-radius:50%; border:1px solid var(--rule2); background:transparent; display:grid; place-items:center; cursor:pointer; font-weight:700; font-size:var(--t-s)}
.icon-btn svg{width:20px; height:20px}
.menu-btn{display:none}
.login{min-height:44px}
/* the hamza line */
.hline{position:relative; height:14px}
.hline::before{content:""; position:absolute; top:6px; left:max(20px,env(safe-area-inset-left,0px)); right:max(20px,env(safe-area-inset-right,0px)); border-top:2px dotted var(--path)}
.hline b{position:absolute; top:-6px; right:calc(max(20px,env(safe-area-inset-right,0px)) + var(--p,0) * (100% - 2 * max(20px,env(safe-area-inset-right,0px)) - 26px)); width:26px; height:26px; border-radius:50%; background:var(--green); color:var(--ivory); display:grid; place-items:center; font-family:var(--ruqaa); font-weight:700; font-size:1rem; line-height:1; box-shadow:0 0 0 5px rgba(141,181,150,.14)}
.hline b span{transform:translateY(-.15em)}
/* display settings panel */
.settings{position:absolute; top:calc(100% + 8px); left:max(20px,env(safe-area-inset-left,0px)); width:min(300px,calc(100vw - 40px)); padding:var(--s4); border-radius:var(--r-m); background:var(--ivory); color:var(--dark); box-shadow:0 24px 60px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:var(--s3); z-index:60}
.settings h2{font-size:var(--t-s); font-weight:700}
.set-row{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); font-size:var(--t-s)}
.seg2{display:flex; gap:4px; padding:4px; border-radius:999px; background:var(--light)}
.seg2 button{border:0; background:none; border-radius:999px; padding:6px 12px; cursor:pointer; font-weight:700; font-size:var(--t-xs); color:var(--muted)}
.seg2 button[aria-pressed="true"]{background:var(--dark); color:var(--ivory)}
@media (max-width:1240px){
  .nav{display:none; position:absolute; top:100%; right:0; left:0; flex-direction:column; gap:0; padding:var(--s3) max(20px,env(safe-area-inset-right,0px)) var(--s5); background:var(--bg); border-bottom:1px solid var(--rule); margin:0}
  .nav.open{display:flex}
  .nav a{padding:var(--s3) var(--s2); font-size:var(--t-l); border-radius:var(--r-s)}
  .menu-btn{display:grid; margin-inline-start:auto}
  .top .login{display:none}
}
.nav .nav-login{display:none}
@media (max-width:1240px){ .nav .nav-login{display:block; margin-top:var(--s2); text-align:center; background:var(--fg); color:var(--bg)} }

/* ===== sections ===== */
.sec{padding-block:var(--s8)}
.sec-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s6)}
.sec-head h2{font-family:var(--ruqaa); font-weight:700; font-size:var(--t-h2); line-height:1.6}
.sec-head p{color:var(--fg2); max-width:44ch}
.rule{border:0; border-top:1px solid var(--rule); margin:0}

/* ===== HOME hero ===== */
.hero{padding-block:var(--s7) var(--s7)}
.title-line{display:flex; align-items:center; gap:clamp(12px,2vw,28px); font-family:var(--ruqaa); font-weight:700; font-size:var(--t-d); line-height:1.5; margin-bottom:var(--s5)}
.title-line .w{white-space:nowrap}
.title-line .w2{color:var(--lgreen)}
html[data-look="light"] .title-line .w2{color:var(--green)}
.title-line .road{position:relative; flex:1; min-width:60px; height:var(--hz); --hz:clamp(44px,6vw,84px)}
.title-line .road::before{content:""; position:absolute; top:50%; right:0; left:0; border-top:3px dotted var(--path)}
.title-line .road i{position:absolute; top:calc(50% - 5px); left:-2px; width:10px; height:10px; border-radius:50%; background:var(--lgreen)}
.hz{position:absolute; top:0; right:calc(50% - var(--hz) / 2); width:var(--hz); height:var(--hz); border-radius:50%; background:var(--green); display:grid; place-items:center; color:var(--ivory); animation:hzTravel 1.6s .3s cubic-bezier(.6,0,.2,1) both, hzGlow 4s 2s ease-in-out infinite}
.hz span{font-family:var(--ruqaa); font-size:calc(var(--hz) * .58); line-height:1; transform:translateY(-.14em)}
@keyframes hzTravel{from{right:0} to{right:calc(50% - var(--hz) / 2)}}
@keyframes hzGlow{0%,100%{box-shadow:0 0 0 10px rgba(141,181,150,.10),0 0 40px rgba(141,181,150,.22)} 50%{box-shadow:0 0 0 18px rgba(141,181,150,.05),0 0 80px rgba(141,181,150,.4)}}
.hero-body{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--s7); align-items:end}
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--s3)}
.hero-note{font-size:var(--t-s); color:var(--fg3); margin-top:var(--s3)}
@media (max-width:760px){
  .title-line{flex-direction:column; align-items:stretch; gap:0; font-size:clamp(3rem,15vw,4.5rem)}
  .title-line .w1{align-self:flex-start} .title-line .w2{align-self:flex-end}
  .title-line .road{flex:none; --hz:56px; margin-block:var(--s1)}
  .hero-body{grid-template-columns:1fr; gap:var(--s5)}
  .hero-actions .btn{flex:1 1 auto}
}

/* ===== stage path (stations on the dotted line) ===== */
.stations{position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); margin-bottom:var(--s6)}
.stations::before{content:""; position:absolute; top:21px; right:calc(100% / 12); left:calc(100% / 12); border-top:2px dotted var(--path)}
.station{position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--s3); padding:0 var(--s1); border:0; background:none; cursor:pointer; text-align:center; color:var(--fg2)}
.station .dot{position:relative; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--bg); border:2px solid var(--rule2); transition:background .25s, border-color .25s}
.station .dot::after{content:""; width:10px; height:10px; border-radius:50%; background:var(--rule2)}
.station .lbl{font-size:var(--t-s); font-weight:500; line-height:1.5}
.station:hover .lbl{color:var(--fg)}
.station[aria-pressed="true"]{color:var(--fg)}
.station[aria-pressed="true"] .lbl{font-weight:700}
.station[aria-pressed="true"] .dot{background:var(--green); border-color:var(--green)}
.station[aria-pressed="true"] .dot::after{width:26px; height:24px; border-radius:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='24 6 50 46'%3E%3Cpath d='M64 18 C57 11 45 13 45 22 C45 31 56 33 65 28 L30 45' fill='none' stroke='%23FBF8F4' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.track{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--s7); padding-top:var(--s6); border-top:1px solid var(--rule)}
.track h3{font-family:var(--ruqaa); font-weight:700; font-size:var(--t-h1); line-height:1.5}
.track .who{color:var(--fg2); font-size:var(--t-l); font-weight:300; margin-top:var(--s2); max-width:40ch}
.track .meta{font-size:var(--t-s); color:var(--accent); font-weight:700}
.svc-list li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s4); padding-block:var(--s3); border-bottom:1px solid var(--rule)}
.svc-list li:first-child{border-top:1px solid var(--rule)}
.svc-list b{font-weight:700}
.svc-list span{font-size:var(--t-s); color:var(--fg3); text-align:left}
.track .acts{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s5)}
.fade{animation:fade .35s ease both}
@keyframes fade{from{opacity:.15} to{opacity:1}}
@media (max-width:860px){
  .stations{grid-template-columns:1fr; gap:0}
  .stations::before{top:22px; bottom:22px; right:21px; left:auto; border-top:0; border-right:2px dotted var(--path)}
  .station{flex-direction:row; justify-content:flex-start; text-align:start; padding:var(--s2) 0; gap:var(--s4)}
  .station .lbl{font-size:var(--t-b)}
  .track{grid-template-columns:1fr; gap:var(--s5)}
  .svc-list span{display:none}
}

/* ===== tools trio ===== */
.trio{display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){ .trio{grid-template-columns:repeat(2,minmax(0,1fr))} .trio a:nth-child(3){border-inline-start:0; padding-inline-start:0} }
.trio a{display:flex; flex-direction:column; gap:var(--s3); padding:var(--s5) var(--s5) var(--s5) var(--s6); text-decoration:none; border-inline-start:1px solid var(--rule)}
.trio a:first-child{border-inline-start:0; padding-inline-start:0}
.trio h3{font-family:var(--ruqaa); font-weight:700; font-size:var(--t-h3); line-height:1.6}
.trio p{color:var(--fg2); font-size:var(--t-s)}
.trio .go{margin-top:auto; font-weight:700; font-size:var(--t-s); color:var(--accent)}
.trio a:hover h3{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:8px}
@media (max-width:860px){ .trio{grid-template-columns:1fr} .trio a{padding:var(--s5) 0; border-inline-start:0; border-top:1px solid var(--rule)} .trio a:first-child{border-top:0} }

/* ===== sectors ribbon ===== */
.ribbon{background:var(--green); padding-block:var(--s4); overflow:hidden}
.ribbon .trk{display:flex; width:max-content; animation:slide 70s linear infinite}
.ribbon p{font-family:var(--ruqaa); font-weight:700; font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.6; white-space:nowrap; color:var(--ivory); padding-inline:var(--s5)}
.ribbon p:nth-child(even){color:var(--sand)}
@keyframes slide{to{transform:translateX(50%)}}

/* ===== name strip & closing ===== */
.closing{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s6); align-items:center; padding:var(--s7) 0; border-top:1px solid var(--rule)}
.closing h2{font-family:var(--ruqaa); font-weight:700; font-size:var(--t-h2); line-height:1.6}
.closing p{color:var(--fg2); max-width:48ch; margin-top:var(--s2)}
@media (max-width:760px){ .closing{grid-template-columns:1fr} }

/* ===== page head (inner pages) ===== */
.phead{padding-block:var(--s7) var(--s5)}
.phead h1{font-family:var(--ruqaa); font-weight:700; font-size:var(--t-h1); line-height:1.55; margin-bottom:var(--s3)}

/* ===== LAB wizard ===== */
.steps-path{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:var(--s6)}
.steps-path::before{content:""; position:absolute; top:19px; right:12.5%; left:12.5%; border-top:2px dotted var(--path)}
.sp{position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--s2); border:0; background:none; color:var(--fg3); text-align:center; padding:0; cursor:default}
.sp .dot{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--bg); border:2px solid var(--rule2); font-weight:700; font-size:var(--t-s)}
.sp .lbl{font-size:var(--t-s); font-weight:500; line-height:1.5}
.sp.done{color:var(--fg2); cursor:pointer}
.sp.done .dot{border-color:var(--lgreen); color:var(--lgreen)}
.sp.now{color:var(--fg)}
.sp.now .lbl{font-weight:700}
.sp.now .dot{background:var(--green); border-color:var(--green); color:var(--ivory); font-family:var(--ruqaa); font-size:1.35rem}
.sp.now .dot span{transform:translateY(-.15em)}
@media (max-width:600px){ .sp .lbl{font-size:var(--t-xs)} }

.qcard{max-width:860px}
.qcard h2{font-family:var(--ruqaa); font-weight:700; font-size:var(--t-h2); line-height:1.55}
.qcard .hint{color:var(--fg2); margin:var(--s2) 0 var(--s5)}
.opts{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--s3)}
.opt{display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:64px; padding:var(--s3) var(--s4); border-radius:var(--r-m); border:1.5px solid var(--rule2); background:transparent; text-align:start; cursor:pointer; transition:border-color .2s, background .2s}
.opt b{font-weight:700; font-size:var(--t-b); line-height:1.5}
.opt small{font-size:var(--t-xs); color:var(--fg3); line-height:1.6}
.opt:hover{border-color:var(--fg2)}
.opt[aria-pressed="true"]{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.opt[aria-pressed="true"] small{color:inherit; opacity:.7}
.opt .x{font-size:var(--t-xs); font-weight:700; color:var(--sand)}
.opt[aria-pressed="true"] .x{color:var(--brown)}
.opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.opts.size{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:700px){ .opts{grid-template-columns:repeat(2,minmax(0,1fr))} .opts.size{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:420px){ .opts:not(.two):not(.size){grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:var(--s2); margin-bottom:var(--s5)}
.field > .flabel{font-weight:700; font-size:var(--t-s)}
.select{appearance:none; -webkit-appearance:none; min-height:52px; padding:0 var(--s4) 0 var(--s7); border-radius:var(--r-m); border:1.5px solid var(--rule2); background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23C9B3A8' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat left 18px center; font-size:var(--t-b); color:var(--fg); max-width:420px; width:100%}
.select option{background:var(--ivory); color:var(--dark)}
.other{display:flex; gap:var(--s2); margin-top:var(--s3); max-width:520px}
.other input{flex:1; min-width:0; min-height:48px; padding:0 var(--s4); border-radius:999px; border:1.5px solid var(--rule2); background:transparent}
.qnav{display:flex; justify-content:space-between; align-items:center; gap:var(--s3); margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--rule)}

/* ===== idea sheet (paper the visitor keeps) ===== */
.sheet{max-width:860px; background:var(--ivory); color:var(--dark); border-radius:var(--r-l); padding:clamp(22px,4vw,48px); box-shadow:0 30px 80px rgba(0,0,0,.3); position:relative; overflow:hidden}
html[data-look="light"] .sheet{background:#fff0; background:var(--light)}
.sheet::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.06; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.sheet-top{display:flex; justify-content:space-between; align-items:center; gap:var(--s3); padding-bottom:var(--s4); border-bottom:2px dotted var(--sand)}
.sheet-top .logo svg{height:28px} .sheet-top .logo span{font-size:1.3rem; color:var(--dark)}
.sheet-top small{font-size:var(--t-xs); color:var(--rose); font-weight:700}
.sheet h2{font-family:var(--ruqaa); font-weight:700; font-size:var(--t-h2); line-height:1.55; color:var(--brown); margin-top:var(--s5)}
.facts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3); margin:var(--s4) 0 var(--s5)}
.facts div{padding:var(--s3); border-radius:var(--r-s); background:var(--light)}
html[data-look="light"] .facts div{background:var(--ivory)}
.facts dt{font-size:var(--t-xs); color:var(--rose); font-weight:700}
.facts dd{margin:0; font-weight:700; font-size:var(--t-s); line-height:1.6}
@media (max-width:640px){ .facts{grid-template-columns:repeat(2,minmax(0,1fr))} }
.verdict{display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s4); align-items:start; padding:var(--s4) var(--s5); border-radius:var(--r-m); background:var(--green); color:var(--ivory)}
.verdict .hz-s{width:44px; height:44px; border-radius:50%; background:var(--ivory); color:var(--green); display:grid; place-items:center; font-family:var(--ruqaa); font-weight:700; font-size:1.5rem}
.verdict .hz-s span{transform:translateY(-.15em)}
.verdict small{display:block; font-size:var(--t-xs); opacity:.8; font-weight:700}
.verdict b{display:block; font-size:var(--t-l); line-height:1.5}
.verdict p{font-size:var(--t-s); opacity:.9; margin-top:var(--s1)}
.sheet h3{font-size:var(--t-b); font-weight:800; color:var(--brown); margin:var(--s5) 0 var(--s2)}
.sheet ul li{position:relative; padding:var(--s2) var(--s5) var(--s2) 0; border-bottom:1px solid var(--div); font-size:var(--t-b); line-height:1.7}
.sheet ul li::before{content:""; position:absolute; right:4px; top:1.05em; width:8px; height:8px; border-radius:50%; background:var(--green)}
.sheet .qs li::before{background:none; width:auto; height:auto; content:"؟"; font-family:var(--ruqaa); font-weight:700; color:var(--rose); top:.35em; right:2px; font-size:1.2rem}
.sheet-note{font-size:var(--t-xs); color:var(--muted); margin-top:var(--s4)}
.sheet-actions{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s5)}
.sheet .btn-line{border-color:rgba(107,79,79,.3); color:var(--dark)}
@media (max-width:520px){ .sheet-actions .btn{flex:1 1 100%} }

/* ===== footer, fab, modal ===== */
footer{border-top:1px solid var(--rule); padding-block:var(--s6) calc(var(--s6) + env(safe-area-inset-bottom,0px)); margin-top:var(--s7)}
footer .wrap{display:flex; flex-wrap:wrap; gap:var(--s5); align-items:center; justify-content:space-between}
footer nav{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5)}
footer nav a{text-decoration:none; color:var(--fg2); font-size:var(--t-s)}
footer p{font-size:var(--t-xs); color:var(--fg3)}
.fab{position:fixed; z-index:45; bottom:calc(18px + env(safe-area-inset-bottom,0px)); left:calc(18px + env(safe-area-inset-left,0px)); width:56px; height:56px; border-radius:50%; background:var(--green); display:grid; place-items:center; box-shadow:0 12px 30px rgba(0,0,0,.3)}
.fab svg{width:26px; height:26px}
.modal{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px; background:rgba(62,44,42,.6); backdrop-filter:blur(6px)}
.modal .box{width:100%; max-width:420px; border-radius:var(--r-l); background:var(--ivory); color:var(--dark); padding:var(--s6); display:flex; flex-direction:column; gap:var(--s3)}
.modal h2{font-family:var(--ruqaa); font-weight:700; font-size:2rem; color:var(--brown); line-height:1.5}
.modal label{display:flex; flex-direction:column; gap:var(--s1); font-size:var(--t-s); font-weight:700; color:var(--muted)}
.modal input{min-height:48px; border:1px solid var(--div); border-radius:var(--r-s); padding:0 var(--s4); background:var(--light); color:var(--dark)}
.modal .msg{font-size:var(--t-s); color:var(--muted); background:var(--light); border-radius:var(--r-s); padding:var(--s3)}
.modal .x{align-self:flex-start; width:40px; height:40px; border-radius:50%; border:0; background:var(--light); color:var(--dark); cursor:pointer; font-size:1.2rem}
main{animation:pageIn .45s ease both}
@keyframes pageIn{from{opacity:.3} to{opacity:1}}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important; transition:none!important} }

/* ===== CALCULATOR ===== */
.why{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-bottom:var(--s6); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.why div{padding:var(--s4) var(--s5) var(--s4) var(--s5); border-inline-start:1px solid var(--rule)}
.why div:first-child{border-inline-start:0; padding-inline-start:0}
.why b{display:block; font-size:var(--t-b)}
.why p{font-size:var(--t-s); color:var(--fg2)}
@media (max-width:760px){ .why{grid-template-columns:1fr} .why div{border-inline-start:0; padding-inline:0; border-top:1px solid var(--rule)} .why div:first-child{border-top:0} }
.calc{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--s7); align-items:start}
@media (max-width:960px){ .calc{grid-template-columns:1fr; gap:var(--s6)} }
.example{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s3); padding:var(--s3) var(--s4); border-radius:var(--r-m); background:var(--tint2); margin-bottom:var(--s5); font-size:var(--t-s)}
.example b{font-weight:700}
.example button{border:0; background:none; color:var(--accent); font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:4px; padding:var(--s1) 0}
.group{margin-bottom:var(--s6)}
.group-h{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); padding-bottom:var(--s2); border-bottom:2px dotted var(--path); margin-bottom:var(--s2)}
.group-h h2{font-family:var(--ruqaa); font-weight:700; font-size:var(--t-h3); line-height:1.6}
.group-h span{font-size:var(--t-s); font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums}
.group > p{font-size:var(--t-s); color:var(--fg3); margin-bottom:var(--s2)}
.row{display:grid; grid-template-columns:minmax(0,1fr) 170px; gap:var(--s3); align-items:center; padding-block:var(--s2); border-bottom:1px solid var(--rule)}
.row label b{display:block; font-weight:700; font-size:var(--t-s); line-height:1.6}
.row label small{display:block; font-size:var(--t-xs); color:var(--fg3); line-height:1.6}
.money{display:flex; align-items:center; border:1.5px solid var(--rule2); border-radius:var(--r-s); overflow:hidden; min-height:46px}
.money:focus-within{border-color:var(--accent)}
.money input,.money select{flex:1; min-width:0; border:0; background:transparent; padding:0 var(--s3); font-size:var(--t-b); font-variant-numeric:tabular-nums; text-align:left; direction:ltr}
.money select{direction:rtl; text-align:right; appearance:none; -webkit-appearance:none}
.money select option{background:var(--ivory); color:var(--dark)}
.money em{font-style:normal; font-size:var(--t-xs); color:var(--fg3); padding-inline:var(--s3); border-inline-start:1px solid var(--rule)}
@media (max-width:480px){ .row{grid-template-columns:1fr; gap:var(--s2)} }
.out{position:sticky; top:110px}
.out .sheet h2{margin-top:var(--s4)}
.big{font-size:clamp(2.4rem,5vw,3.4rem); font-weight:800; line-height:1.2; color:var(--green); font-variant-numeric:tabular-nums}
.big small{font-size:.4em; font-weight:700; color:var(--brown)}
.bar{display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--div); margin:var(--s4) 0 var(--s3)}
.bar i{display:block; height:100%}
.keys{display:grid; grid-template-columns:1fr; gap:0}
.keys div{display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:var(--s3); align-items:center; padding:var(--s2) 0; border-bottom:1px solid var(--div); font-size:var(--t-s)}
.keys i{width:12px; height:12px; border-radius:3px}
.keys b{font-variant-numeric:tabular-nums}
.meaning{margin-top:var(--s4); padding:var(--s4); border-radius:var(--r-m); background:var(--light); font-size:var(--t-s); line-height:1.9}
html[data-look="light"] .meaning{background:var(--ivory)}
.meaning b{color:var(--brown)}
.be{margin-top:var(--s7)}
.be-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--s7); align-items:start}
@media (max-width:960px){ .be-grid{grid-template-columns:1fr; gap:var(--s5)} .out{position:static} }
.kpi2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3); margin-top:var(--s4)}
.kpi2 div{padding:var(--s3) var(--s4); border-radius:var(--r-m); background:var(--light)}
html[data-look="light"] .kpi2 div{background:var(--ivory)}
.kpi2 small{display:block; font-size:var(--t-xs); color:var(--rose); font-weight:700}
.kpi2 b{display:block; font-size:1.6rem; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.4}
.warn{margin-top:var(--s3); font-size:var(--t-s); color:var(--brown)}
.hz-in{display:inline-grid; place-items:center; width:1.15em; height:1.15em; border-radius:50%; background:var(--green); color:var(--ivory); vertical-align:middle; font-size:.8em}
.hz-in span{transform:translateY(-.12em)}
.mtotal{display:none}
@media (max-width:960px){
  .mtotal{position:fixed; z-index:44; bottom:calc(14px + env(safe-area-inset-bottom,0px)); right:calc(14px + env(safe-area-inset-right,0px)); left:calc(84px + env(safe-area-inset-left,0px)); display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:56px; padding:0 8px 0 18px; padding-inline:18px 8px; border-radius:999px; background:var(--ivory); color:var(--dark); box-shadow:0 12px 30px rgba(0,0,0,.3); font-size:var(--t-s); transition:transform .3s, opacity .3s}
  .mtotal b{font-weight:800; color:var(--green); font-variant-numeric:tabular-nums}
  .mtotal button{border:0; border-radius:999px; min-height:42px; padding:0 16px; background:var(--dark); color:var(--ivory); font-weight:700; cursor:pointer}
  .mtotal.off{opacity:0; transform:translateY(120%); pointer-events:none}
}

/* ===== services ===== */
.station .lbl small{display:block; font-size:var(--t-xs); font-weight:400; color:var(--fg3)}
.svc-wrap .stations{margin-bottom:var(--s5)}
.track-head{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--s6); align-items:end; padding-top:var(--s6); border-top:1px solid var(--rule)}
.track-head h2{font-family:var(--ruqaa); font-weight:700; font-size:var(--t-h1); line-height:1.5}
.track-head .who{color:var(--fg2); font-size:var(--t-l); font-weight:300; max-width:44ch}
.svc-table{margin-top:var(--s6)}
.svc-table li{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:var(--s6); padding-block:var(--s5); border-top:1px solid var(--rule)}
.svc-table li:last-child{border-bottom:1px solid var(--rule)}
.svc-table h3{font-size:var(--t-l); font-weight:700; line-height:1.5}
.svc-table p{color:var(--fg2); max-width:58ch; margin-top:var(--s1)}
.svc-table .get{padding-inline-start:var(--s5); border-inline-start:2px dotted var(--path)}
.svc-table .get small{display:block; font-size:var(--t-xs); color:var(--accent); font-weight:700}
.svc-table .get b{font-weight:500; font-size:var(--t-s)}
.track-foot{display:flex; flex-wrap:wrap; gap:var(--s4); align-items:center; justify-content:space-between; margin-top:var(--s5)}
.track-foot p{color:var(--fg2); max-width:60ch}
.track-foot p b{color:var(--fg)}
.consult{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s5); align-items:center; margin-top:var(--s8); padding:var(--s6); border-radius:var(--r-l); background:var(--green); color:var(--ivory)}
.consult h2{font-family:var(--ruqaa); font-weight:700; font-size:var(--t-h2); line-height:1.5}
.consult p{opacity:.9; max-width:56ch}
.consult .btn{background:var(--ivory); color:var(--dark)}
@media (max-width:860px){ .track-head{grid-template-columns:1fr; gap:var(--s3)} .svc-table li{grid-template-columns:1fr; gap:var(--s3)} .svc-table .get{padding-inline-start:var(--s4)} .consult{grid-template-columns:1fr} }

/* ===== check ===== */
.check-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--s7); align-items:start}
@media (max-width:960px){ .check-grid{grid-template-columns:1fr; gap:var(--s6)} }
.crow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s4); align-items:center; padding-block:var(--s3); border-bottom:1px solid var(--rule)}
.crow p{font-size:var(--t-b); line-height:1.7}
.tri{display:flex; gap:4px; padding:4px; border-radius:999px; border:1.5px solid var(--rule2)}
.tri button{min-width:64px; min-height:40px; border:0; border-radius:999px; background:none; cursor:pointer; font-weight:700; font-size:var(--t-s); color:var(--fg2)}
.tri button[aria-checked="true"]{background:var(--fg); color:var(--bg)}
@media (max-width:520px){ .crow{grid-template-columns:1fr; gap:var(--s2)} .tri button{flex:1} }
.meters{display:flex; flex-direction:column; gap:var(--s3); margin-top:var(--s4)}
.meter > div{display:flex; justify-content:space-between; font-size:var(--t-s); font-weight:700}
.meter i{display:block; height:10px; border-radius:5px; background:var(--div); margin-top:6px; overflow:hidden}
.meter s{display:block; height:100%; border-radius:5px; background:var(--green); transition:width .4s}
.meter.low s{background:var(--rose)}

/* ===== sectors ===== */
.sec-tools{display:flex; flex-wrap:wrap; gap:var(--s4); align-items:center; justify-content:space-between; margin-bottom:var(--s5)}
.search{flex:1; max-width:460px; min-height:52px; border-radius:999px; border:1.5px solid var(--rule2); display:flex; align-items:center; gap:var(--s2); padding-inline:var(--s4)}
.search svg{width:20px; height:20px; flex-shrink:0; color:var(--fg3)}
.search input{flex:1; min-width:0; border:0; background:none; font-size:var(--t-b); min-height:48px}
.search input:focus{outline:none} .search:focus-within{border-color:var(--accent)}
.sec-legend{display:flex; gap:var(--s4); align-items:center; font-size:var(--t-s); color:var(--fg2)}
.sec-legend i{display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--sand); margin-inline-end:6px}
.srow{display:grid; grid-template-columns:240px minmax(0,1fr) auto; gap:var(--s5); align-items:center; padding-block:var(--s4); border-top:1px solid var(--rule)}
.srow:last-child{border-bottom:1px solid var(--rule)}
.srow h2{font-family:var(--ruqaa); font-weight:700; font-size:1.55rem; line-height:1.6}
.acts{display:flex; flex-wrap:wrap; gap:6px}
.acts li{font-size:var(--t-s); padding:2px 12px; border-radius:999px; border:1px solid var(--rule2); color:var(--fg2)}
.acts li.x{border-color:var(--sand); color:var(--fg)}
.acts li.x::before{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--sand); margin-inline-end:6px; vertical-align:middle}
.acts li.hit{background:var(--fg); color:var(--bg)}
@media (max-width:900px){ .srow{grid-template-columns:1fr; gap:var(--s3)} .srow .btn{justify-self:start} }
.empty{display:flex; flex-direction:column; align-items:flex-start; gap:var(--s4); padding:var(--s6) 0; border-top:1px solid var(--rule)}

/* ===== about ===== */
.name-eq{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(12px,3vw,36px); font-family:var(--ruqaa); font-weight:700; font-size:clamp(3rem,9vw,7rem); line-height:1.5}
.name-eq .a{color:var(--sand)} .name-eq .o{color:var(--rose); font-family:var(--sans); font-weight:300; font-size:.55em}
.name-eq .hz-in{font-size:.75em}
.about-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s7); margin-top:var(--s6)}
.about-grid h2{font-family:var(--ruqaa); font-weight:700; font-size:var(--t-h3); line-height:1.6; margin-bottom:var(--s2)}
.about-grid p{color:var(--fg2)}
@media (max-width:860px){ .about-grid{grid-template-columns:1fr; gap:var(--s5)} }
.journey{position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--s4)}
.journey::before{content:""; position:absolute; top:21px; right:calc(100% / 12); left:calc(100% / 12); border-top:2px dotted var(--path)}
.journey li{position:relative; display:flex; flex-direction:column; gap:var(--s2)}
.journey .dot{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--bg); border:2px solid var(--rule2); font-weight:700}
.journey li:nth-child(4) .dot{background:var(--green); border-color:var(--green); color:var(--ivory)}
.journey h3{font-size:var(--t-b); font-weight:700; line-height:1.5}
.journey p{font-size:var(--t-s); color:var(--fg2)}
@media (max-width:900px){ .journey{grid-template-columns:1fr; gap:var(--s4)} .journey::before{top:22px; bottom:22px; right:21px; left:auto; border-top:0; border-right:2px dotted var(--path)} .journey li{display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:var(--s4)} .journey .dot{grid-row:span 2} }
.three{display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
.three div{padding:var(--s4) var(--s5); border-inline-start:1px solid var(--rule)}
.three div:first-child{border-inline-start:0; padding-inline-start:0}
.three h3{font-size:var(--t-b); font-weight:700}
.three p{font-size:var(--t-s); color:var(--fg2)}
@media (max-width:760px){ .three{grid-template-columns:1fr} .three div{border-inline-start:0; padding-inline:0; border-top:1px solid var(--rule)} .three div:first-child{border-top:0} }

/* ===== contact & faq ===== */
.contact-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--s7); align-items:start}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr; gap:var(--s6)} }
.form{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4)}
.form .full{grid-column:1 / -1}
.form label{display:block; font-weight:700; font-size:var(--t-s); margin-bottom:var(--s1)}
.form input,.form select,.form textarea{width:100%; min-height:52px; padding:var(--s3) var(--s4); border-radius:var(--r-s); border:1.5px solid var(--rule2); background:transparent; font-size:var(--t-b); font-family:inherit}
.form select option{background:var(--ivory); color:var(--dark)}
.form textarea{min-height:130px; resize:vertical; line-height:1.8}
.form input:focus,.form select:focus,.form textarea:focus{outline:none; border-color:var(--accent)}
@media (max-width:520px){ .form{grid-template-columns:1fr} }
.err{color:var(--sand); font-weight:700}
.hint2{font-size:var(--t-s); color:var(--fg3); margin-top:var(--s2)}
.ways li{border-top:1px solid var(--rule)} .ways li:last-child{border-bottom:1px solid var(--rule)}
.ways a,.ways div{display:grid; grid-template-columns:44px minmax(0,1fr); gap:var(--s4); align-items:center; padding-block:var(--s4); text-decoration:none}
.ways .ic{width:44px; height:44px; border-radius:50%; background:var(--green); display:grid; place-items:center}
.ways .ic svg{width:22px; height:22px}
.ways b{display:block; font-size:var(--t-b)}
.ways span{display:block; font-size:var(--t-s); color:var(--fg2)}
.qa{border-top:1px solid var(--rule)} .qa:last-child{border-bottom:1px solid var(--rule)}
.qa summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:var(--s4); padding-block:var(--s4); font-weight:700; font-size:var(--t-b)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+"; flex-shrink:0; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--rule2); font-weight:400; line-height:1}
.qa[open] summary::after{content:"−"}
.qa p{padding-bottom:var(--s4); color:var(--fg2); max-width:70ch}
.qa a{color:var(--accent); font-weight:700}
.ask-box{display:flex; gap:var(--s2); margin-top:var(--s5); max-width:640px}
.ask-box input{flex:1; min-width:0; min-height:52px; padding:0 var(--s4); border-radius:999px; border:1.5px solid var(--rule2); background:transparent}
.ans{margin-top:var(--s4); padding:var(--s4); border-radius:var(--r-m); background:var(--tint2); max-width:70ch; margin-bottom:var(--s3)}

/* ===== prose (privacy) ===== */
.prose{max-width:70ch}
.prose h2{font-size:var(--t-l); font-weight:800; margin:var(--s6) 0 var(--s2)}
.prose p,.prose li{color:var(--fg2)}
.prose ul li{position:relative; padding-inline-start:var(--s5); margin-bottom:var(--s2)}
.prose ul li::before{content:""; position:absolute; right:4px; top:.8em; width:7px; height:7px; border-radius:50%; background:var(--accent)}
.prose a{color:var(--accent)}
.notfound{padding-block:var(--s9); text-align:start}
.notfound h1{font-family:var(--ruqaa); font-weight:700; font-size:var(--t-h1); line-height:1.5}

/* ===== hamza mark (brand path, always centered) ===== */
.hzm{display:block; width:48%; height:auto; color:currentColor}
.hline b .hzm{width:58%}
.hz-in .hzm{width:58%}
.sp .dot .hzm{width:52%}
.verdict .hz-s .hzm{width:52%}
.follow{display:flex; align-items:center; gap:var(--s3); margin:calc(var(--s3) * -1) 0 var(--s6); font-size:var(--t-s); font-weight:700; color:var(--accent)}
.follow .hz-in{width:30px; height:30px; flex-shrink:0; font-size:1rem}

/* ===== name band ===== */
.name-band{position:relative; background:var(--ivory); color:var(--dark); padding-block:var(--s8) var(--s8); overflow:hidden}
html[data-look="light"] .name-band{background:var(--light)}
.name-band::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.07; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.name-band .wrap{position:relative; z-index:1}
.nb-kicker{font-weight:700; font-size:var(--t-s); color:var(--green); margin-bottom:var(--s4)}
.nb-eq{display:flex; align-items:center; gap:clamp(14px,3vw,40px); --hz:clamp(64px,8vw,104px)}
.nb-w{white-space:nowrap; line-height:1.4}
.nb-a{font-family:var(--ruqaa); font-weight:700; font-size:clamp(3.4rem,10vw,8rem); color:var(--sand)}
.nb-b{font-family:var(--sans); font-weight:300; font-size:clamp(3.2rem,9.5vw,7.6rem); color:var(--brown)}
.nb-road{position:relative; flex:1; min-width:80px; height:var(--hz)}
.nb-road::before{content:""; position:absolute; top:50%; right:0; left:0; border-top:3px dotted var(--sand)}
.nb-end{position:absolute; top:calc(50% - 6px); left:-3px; width:12px; height:12px; border-radius:50%; background:var(--green)}
.nb-hz{position:absolute; top:0; left:0; width:var(--hz); height:var(--hz); border-radius:50%; background:var(--green); color:var(--ivory); display:grid; place-items:center; box-shadow:0 0 0 12px rgba(79,122,90,.12); transition:left 1.8s cubic-bezier(.6,0,.2,1)}
.name-band.armed .nb-hz{left:calc(100% - var(--hz))}
.name-band.armed.go .nb-hz{left:0}
.nb-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); margin-top:var(--s6)}
.nb-grid div{padding:var(--s4) var(--s5); border-radius:var(--r-m); background:var(--light); border:1px solid var(--div)}
html[data-look="light"] .nb-grid div{background:var(--ivory)}
.nb-grid small{display:block; font-family:var(--ruqaa); font-weight:700; font-size:1.5rem; line-height:1.6; color:var(--brown)}
.nb-grid p{font-size:var(--t-b); color:var(--muted)}
.nb-grid .nb-me{background:var(--green); border-color:var(--green)}
.nb-grid .nb-me small,.nb-grid .nb-me p{color:var(--ivory)}
.nb-final{font-family:var(--ruqaa); font-weight:700; font-size:var(--t-h2); line-height:1.6; color:var(--brown); margin-top:var(--s7); max-width:22ch}
.nb-sign{margin-top:var(--s2); font-weight:300; font-size:var(--t-l); color:var(--rose)}
@media (max-width:760px){
  .nb-eq{flex-direction:column; align-items:stretch; gap:0; --hz:60px}
  .nb-a{align-self:flex-start} .nb-b{align-self:flex-end}
  .nb-road{flex:none; height:var(--hz); margin-block:var(--s2)}
  .nb-grid{grid-template-columns:1fr}
}

/* ===== readiness scale ===== */
.hello{display:inline-block; margin-bottom:var(--s3); padding:var(--s1) var(--s4); border-radius:999px; background:var(--green); color:var(--ivory); font-weight:700; font-size:var(--t-s)}
#scIntro h1{font-family:var(--ruqaa); font-weight:700; font-size:var(--t-h1); line-height:1.55; margin-bottom:var(--s3)}
.facts-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:var(--s5); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.facts-row li{padding:var(--s3) var(--s4); border-inline-start:1px solid var(--rule)}
.facts-row li:first-child{border-inline-start:0; padding-inline-start:0}
.facts-row b{display:block; font-size:var(--t-s)} .facts-row span{display:block; font-size:var(--t-xs); color:var(--fg3)}
@media (max-width:700px){ .facts-row{grid-template-columns:1fr} .facts-row li{border-inline-start:0; padding-inline:0; border-top:1px solid var(--rule)} .facts-row li:first-child{border-top:0} }
.resume{margin-top:var(--s4); font-size:var(--t-s); color:var(--fg2)}
.resume button{border:0; background:none; color:var(--accent); font-weight:700; text-decoration:underline; text-underline-offset:4px; cursor:pointer; padding:0 var(--s1)}

.sc-bar{position:sticky; top:86px; z-index:20; background:var(--bg); padding-block:var(--s3) var(--s3); margin-bottom:var(--s5); border-bottom:1px solid var(--rule)}
.sc-path{position:relative; display:grid; grid-template-columns:repeat(var(--n,9),minmax(0,1fr))}
.sc-path::before{content:""; position:absolute; top:17px; right:calc(100% / var(--n,9) / 2); left:calc(100% / var(--n,9) / 2); border-top:2px dotted var(--path)}
.sc-path .sp .dot{width:36px; height:36px}
.sc-path .sp{cursor:pointer}
.sc-path .sp .lbl{font-size:var(--t-xs)}
.sc-count{display:none; font-size:var(--t-s); color:var(--fg2)}
.sc-count b{color:var(--fg)}
.sc-prog{display:none; height:4px; border-radius:2px; background:var(--rule); margin-top:var(--s2); overflow:hidden}
.sc-prog i{display:block; height:100%; background:var(--lgreen); transition:width .3s}
@media (max-width:760px){
  .sc-bar{top:86px}
  .sc-path .sp .lbl{display:none}
  .sc-path .sp .dot{width:28px; height:28px; font-size:var(--t-xs)}
  .sc-path::before{top:13px}
  .sc-path .sp.now .dot{font-size:1.05rem}
  .sc-count{display:block; margin-top:var(--s2)}
}
.sc-step{max-width:860px}
.sc-head{margin-bottom:var(--s5)}
.sc-head h2{font-family:var(--ruqaa); font-weight:700; font-size:var(--t-h2); line-height:1.55}
.sc-head p{color:var(--fg2)}
.sc-done{display:inline-block; margin-top:var(--s2); font-size:var(--t-xs); font-weight:700; color:var(--accent)}
/* questions (restyled from the original) */
.sc-step .q{padding-block:var(--s5); border-top:1px solid var(--rule)}
.sc-step .q .t{display:block; font-weight:700; font-size:var(--t-l); line-height:1.6; margin-bottom:var(--s1)}
.sc-step .hint{font-size:var(--t-s); color:var(--fg3); margin:0 0 var(--s3)}
.sc-step input[type=text],.sc-step input[type=tel],.sc-step textarea{width:100%; max-width:560px; min-height:50px; padding:var(--s3) var(--s4); border-radius:var(--r-s); border:1.5px solid var(--rule2); background:transparent; font-size:var(--t-b); font-family:inherit}
.sc-step textarea{min-height:110px; max-width:none; resize:vertical; line-height:1.8}
.sc-step input:focus,.sc-step textarea:focus{outline:none; border-color:var(--accent)}
.chips{display:flex; flex-wrap:wrap; gap:var(--s2)}
.chip,.card{position:relative; display:block; cursor:pointer}
.chip input,.card input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.chip span{display:flex; align-items:center; min-height:44px; padding:var(--s2) var(--s4); border-radius:999px; border:1.5px solid var(--rule2); font-size:var(--t-s); font-weight:500; line-height:1.5; transition:background .15s, border-color .15s}
.chip:hover span{border-color:var(--fg2)}
.chip input:checked+span{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.chip input:focus-visible+span,.card:has(input:focus-visible){outline:3px solid var(--accent); outline-offset:2px}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--s3)}
.card{padding:var(--s3) var(--s4); border-radius:var(--r-m); border:1.5px solid var(--rule2); transition:background .15s, border-color .15s}
.card:hover{border-color:var(--fg2)}
.card .ct{display:block; font-weight:700; font-size:var(--t-b); line-height:1.5}
.card .cd{display:block; font-size:var(--t-xs); color:var(--fg3); line-height:1.7; margin-top:2px}
.card:has(input:checked){background:var(--fg); color:var(--bg); border-color:var(--fg)}
.card:has(input:checked) .cd{color:inherit; opacity:.75}
.sec-o{margin-top:var(--s3)}
.rows{display:flex; flex-direction:column; gap:var(--s2)}
.rows .r{display:grid; grid-template-columns:repeat(var(--c,2),minmax(0,1fr)); gap:var(--s2)}
.rows .r input{max-width:none!important}
@media (max-width:560px){ .rows .r{grid-template-columns:1fr} }
.info{margin-top:var(--s3); padding:var(--s3) var(--s4); border-radius:var(--r-m); background:var(--tint2); font-size:var(--t-s); color:var(--fg2)}
.info b{color:var(--fg)}
.code{display:inline-block; direction:ltr; font-weight:800; letter-spacing:.08em; padding:2px 12px; border-radius:8px; background:var(--light); color:var(--brown)}
.cmpbox{margin-top:var(--s4); border:1px solid var(--rule); border-radius:var(--r-m); overflow:hidden}
.cmp2{display:grid; grid-template-columns:1.4fr 1fr 1fr; font-size:var(--t-s)}
.cmp2>div{padding:var(--s2) var(--s3); border-bottom:1px solid var(--rule); display:flex; align-items:center; line-height:1.5}
.cmp2>div:nth-last-child(-n+3){border-bottom:0}
.cmp2 .h{justify-content:center; flex-direction:column; font-weight:700; background:var(--tint)}
.cmp2 .h.best{background:var(--green); color:var(--ivory)}
.cmp2 .h small{font-weight:400; font-size:var(--t-xs); opacity:.85}
.cmp2 .c{justify-content:center; text-align:center}
.cmp2 .c.best{background:var(--tint)}
.ok-i{color:var(--lgreen); font-weight:800} .no-i{color:var(--fg3)} .tx{font-size:var(--t-xs); color:var(--fg2)}
html[data-look="light"] .ok-i{color:var(--green)}
/* results sheet */
.r-sheet{max-width:860px}
.rtabs{display:flex; gap:4px; flex-wrap:wrap; margin-top:var(--s4); padding:4px; border-radius:999px; background:var(--light); width:fit-content; max-width:100%}
.rtabs button{border:0; background:none; border-radius:999px; min-height:40px; padding:0 var(--s4); font-weight:700; font-size:var(--t-s); color:var(--muted); cursor:pointer}
.rtabs button[aria-selected="true"]{background:var(--dark); color:var(--ivory)}
.r-body{padding-top:var(--s5)}
.r-body h3{font-size:var(--t-l); font-weight:800; color:var(--brown); margin:var(--s5) 0 var(--s2)}
.r-p{font-size:var(--t-b); line-height:1.85; color:var(--dark); margin-bottom:var(--s2)}
.r-score{display:grid; grid-template-columns:128px minmax(0,1fr); gap:var(--s5); align-items:center; margin-bottom:var(--s4)}
.r-score svg{width:128px; height:128px}
.r-score small{font-size:var(--t-xs); font-weight:700; color:var(--rose)}
.r-score .num{display:block; font-size:3rem; font-weight:800; line-height:1.15; color:var(--green); font-variant-numeric:tabular-nums}
.r-score .num span{font-size:.4em; color:var(--rose)}
.r-score h3{margin:var(--s1) 0!important; font-family:var(--ruqaa); font-size:var(--t-h3)!important; line-height:1.5}
.r-score p{font-size:var(--t-s); color:var(--muted)}
@media (max-width:520px){ .r-score{grid-template-columns:1fr; gap:var(--s3)} .r-score svg{width:104px; height:104px} }
.offer{padding:var(--s5); border-radius:var(--r-m); border:2px dashed var(--sand)}
.offer small{font-size:var(--t-xs); font-weight:700; color:var(--rose)}
.offer h3{margin-top:0!important}
.offer p{font-size:var(--t-s); color:var(--muted); margin-bottom:var(--s3)}
.pv{margin-top:var(--s4)}
.pv summary{cursor:pointer; font-weight:700; font-size:var(--t-s); color:var(--brown)}
.pv textarea{width:100%; min-height:240px; margin-top:var(--s2); padding:var(--s3); border-radius:var(--r-s); border:1px solid var(--div); background:var(--light); color:var(--dark); font-family:inherit; font-size:var(--t-xs); line-height:1.8}
.r-nav{border-top-color:var(--div)}
.r-nav .btn-line{border-color:rgba(107,79,79,.3); color:var(--dark)}
.r-nav .btn-alt{background:var(--dark); color:var(--ivory)}
/* client link tool */
.tool-box{max-width:640px; display:flex; flex-direction:column; gap:var(--s4)}
.tool-box input{min-height:52px; padding:0 var(--s4); border-radius:var(--r-s); border:1.5px solid var(--rule2); background:transparent; font-size:var(--t-b)}
.linkout{padding:var(--s4); border-radius:var(--r-m); background:var(--tint2); word-break:break-all; direction:ltr; text-align:left; font-size:var(--t-s)}