/* Hisnul Muslim installation guide — matched to the site's green / antique-gold palette. */
.header-install{font:inherit;font-size:12px;font-weight:750;display:inline-flex;align-items:center;gap:8px;justify-content:center;white-space:nowrap;min-height:39px;border:1px solid var(--line);border-radius:999px;padding:8px 13px;color:var(--ink);background:var(--card);cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.header-install:hover{border-color:var(--accent);background:var(--soft);transform:translateY(-1px)}.header-install:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.header-install[hidden]{display:none!important}
.ig-visible{overflow:hidden!important}
.ig-backdrop[hidden]{display:none!important}
.ig-backdrop{position:fixed;inset:0;z-index:9000;display:flex;align-items:flex-end;justify-content:flex-end;padding:24px;background:rgba(6,32,27,.47);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:igFade .28s both}
.ig-panel{--ig-forest:#163f37;--ig-gold:#b5893c;position:relative;isolation:isolate;flex:none;width:min(450px,100%);max-height:calc(100dvh - 48px);border:1px solid #e0dbcd;border-radius:29px;background:#fcfbf7;color:#193d36;box-shadow:0 32px 110px rgba(8,36,28,.25);overflow:hidden;animation:igRise .42s cubic-bezier(.16,1,.3,1) both;font-family:'Plus Jakarta Sans',Jakarta,system-ui,sans-serif}
.ig-panel:before{content:'';pointer-events:none;position:absolute;inset:0 0 auto 0;height:230px;background:radial-gradient(ellipse at 50% 0%,rgba(238,208,143,.38),transparent 70%);z-index:-1}
.ig-scroll{max-height:calc(100dvh - 49px);overflow-y:auto;overscroll-behavior:contain;padding:24px 29px 22px;scrollbar-width:thin}
.ig-close{position:absolute;top:15px;right:15px;z-index:10;display:grid;place-items:center;width:36px;height:36px;border:1px solid #e7e0d1;border-radius:50%;background:rgba(255,255,255,.85);color:#36554c;cursor:pointer}
.ig-close:hover{background:#f3ecd9}.ig-close:focus-visible,.ig-primary:focus-visible,.ig-secondary:focus-visible{outline:3px solid #e0af55;outline-offset:3px}
.ig-mark{display:flex;align-items:center;justify-content:center;position:relative;height:95px;margin-top:4px;margin-bottom:12px}
.ig-mark:before{content:'';position:absolute;width:107px;height:107px;border-radius:50%;border:1px solid #dfc28f;background:radial-gradient(circle,rgba(248,239,216,.85),rgba(252,249,239,.15));box-shadow:0 0 0 9px rgba(218,184,121,.1)}
.ig-mark img{position:relative;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(43,70,51,.12))}
.ig-stars{position:absolute;z-index:1;color:#bd9551;left:calc(50% - 90px);top:11px;font-size:23px}.ig-star-two{font-size:32px;left:calc(50% + 61px);top:56px}
.ig-eyebrow{display:flex;align-items:center;justify-content:center;gap:9px;font-size:9px;font-weight:800;letter-spacing:2.3px;color:#8c6a34;margin-bottom:12px}
.ig-dot{height:6px;width:6px;background:#ae8a4d;border-radius:100%}
.ig-panel h2{font-family:inherit;font-weight:800;font-size:clamp(25px,4.4vw,31px);line-height:1.2;letter-spacing:-1.25px;text-align:center;margin:0;color:#1b4036}
.ig-panel h2 em{font-style:normal;color:#967037}
.ig-description{font-size:13px;line-height:1.9;color:#6a756c;max-width:350px;text-align:center;margin:13px auto 18px}
.ig-guide-area{position:relative;margin-top:6px}
.ig-benefits{display:grid;gap:10px;margin:0 0 17px;padding:16px 18px;background:#f3f5ec;border:1px solid #e9eadf;border-radius:16px}
.ig-benefits span{display:flex;align-items:center;gap:11px;font-size:12px;line-height:1.6;font-weight:650;color:#35584b}
.ig-benefits svg{flex:0 0 auto;color:#ae863c}
.ig-actions{display:flex;flex-direction:column;gap:9px;position:relative;margin-top:14px}
.ig-primary{font:inherit;border:1px solid #1d4d3f;border-radius:14px;min-height:54px;padding:13px 20px;background:linear-gradient(130deg,#245b49,#163f37);box-shadow:0 9px 22px #204c3d23;color:#fff;font-size:13px;font-weight:750;display:flex;justify-content:center;align-items:center;gap:10px;cursor:pointer;transition:filter .17s,transform .17s}
.ig-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}.ig-primary:active{transform:scale(.985)}
.ig-primary svg{color:#e9c784}
.ig-secondary{border:0;background:transparent;color:#66766b;font:inherit;font-size:12px;font-weight:650;min-height:35px;cursor:pointer}
.ig-secondary:hover{color:#1b4036}
.ig-note{font-size:10px;color:#879187;text-align:center;line-height:1.7;margin:11px auto 0;max-width:330px}
.ig-manual-title{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:12px;flex-wrap:wrap;font-size:11px;color:#547265;font-weight:700}
.ig-step-chip{font-size:9px;color:#936f37;letter-spacing:.7px;border-radius:99px;border:1px solid #e4d7b9;background:#fbf4e5;padding:5px 8px;font-weight:800}
.ig-steps{display:grid;gap:6px}
.ig-step{display:flex;align-items:flex-start;gap:12px;padding:9px 11px;border-radius:12px;background:#f5f6ef;color:#345148}
.ig-step>span{flex:none;font-size:10px;font-weight:800;color:#a67f3c;border-radius:50%;background:#fff;border:1px solid #e5dbc5;width:27px;height:27px;display:grid;place-items:center}
.ig-step p{font-size:11.5px;line-height:1.65;margin:2px 0 0;color:#405c52}
.ig-step p svg{display:inline;vertical-align:-4px;color:#a17635}
.ig-browser-demo{margin-top:12px;padding:10px 12px 12px;border:1px solid #e6dcc9;background:#faf7ef;border-radius:13px;text-align:center}
.ig-demo-label{font-size:9px;letter-spacing:1.4px;font-weight:800;color:#a48857}
.ig-toolbar{margin-top:9px;background:#fff;border:1px solid #e7e5dd;border-radius:10px;display:flex;align-items:center;gap:10px;justify-content:center;height:43px;padding:4px 10px;box-shadow:0 2px 7px #403e2910}
.ig-address{display:flex;justify-content:center;align-items:center;flex:1;font-size:11px;color:#718077;background:#f1f3ef;border-radius:9px;height:29px;min-width:0}
.ig-browser-side{color:#9ba5a0;font-size:20px}.ig-address-wide{margin-left:20px}
.ig-browser-target{flex:none;display:grid;place-items:center;color:#2d5748;position:relative;width:37px;height:34px;border:1.5px solid #ddaa5e;background:#fcf5e4;border-radius:9px;box-shadow:0 0 0 3px #e9c88b2b}
.ig-pointer-layer{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden;border-radius:inherit}
.ig-trail{position:absolute;inset:0;width:100%;height:100%;fill:none;overflow:visible;pointer-events:none}
#ig-trail-path{stroke:#e6ad51;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:3 12;opacity:.82;animation:igDash 2.4s linear infinite}
.ig-gold-pointer{display:block;position:absolute;width:38px;height:44px;transform-origin:4px 3px;animation:igPoint 3.2s ease-in-out infinite;filter:drop-shadow(0 3px 5px #a16b2050);will-change:transform,opacity}
.ig-pointer-spark{position:absolute;left:-5px;top:-6px;font-size:18px;color:#b88528;animation:igSpark 1.4s ease-in-out infinite}
.ig-target-ring{position:absolute;display:block;width:19px;height:19px;border-radius:50%;border:2px solid #e9b14f;transform:translate(-50%,-50%) scale(.3);animation:igPulse 3.2s ease-out infinite;opacity:0}
@keyframes igFade{from{opacity:0}to{opacity:1}}@keyframes igRise{from{transform:translateY(25px) scale(.975);opacity:.35}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes igPoint{0%,9%{transform:translate(0,0) rotate(-7deg) scale(.95);opacity:0}18%{opacity:1}58%,68%{transform:translate(var(--ig-dx),var(--ig-dy)) rotate(-7deg) scale(.95);opacity:1}72%{transform:translate(var(--ig-dx),var(--ig-dy)) rotate(-7deg) scale(.79);opacity:1}82%{transform:translate(var(--ig-dx),var(--ig-dy)) rotate(-7deg) scale(.95);opacity:.8}100%{transform:translate(var(--ig-dx),var(--ig-dy)) rotate(-7deg);opacity:0}}
@keyframes igPulse{0%,56%{opacity:0;transform:translate(-50%,-50%) scale(.2)}72%{opacity:.95;transform:translate(-50%,-50%) scale(2.8)}90%,100%{opacity:0;transform:translate(-50%,-50%) scale(4)}}
@keyframes igDash{to{stroke-dashoffset:-60}}@keyframes igSpark{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
@media (max-width:760px){
 .site-header .header-install{padding:7px 9px;min-width:39px;min-height:39px}.site-header .header-install span{display:none}
 .ig-backdrop{padding:0;align-items:flex-end;justify-content:center;background:rgba(6,28,22,.55)}
 .ig-panel{width:100%;max-height:calc(100dvh - 8px);border-radius:28px 28px 0 0;border-bottom:0;box-shadow:0 -20px 65px #123d393f}
 .ig-scroll{max-height:calc(100dvh - 8px);padding:15px 23px calc(18px + env(safe-area-inset-bottom,0px))}
 .ig-close{top:12px;right:14px;width:34px;height:34px}
 .ig-mark{height:86px;margin-top:4px;margin-bottom:5px}.ig-mark:before{width:93px;height:93px}.ig-mark img{width:60px;height:60px}
 .ig-panel h2{font-size:29px}.ig-description{font-size:12.5px;margin:10px auto 16px}
 .ig-benefits{padding:13px 17px;gap:7px;margin-bottom:15px}
 .ig-note{font-size:9px}.ig-step{padding:8px 10px}.ig-step p{font-size:11.2px}
}
@media(max-width:390px){.ig-scroll{padding-left:17px;padding-right:17px}.ig-panel h2{font-size:26px}.ig-description{line-height:1.65}.ig-mark{height:75px}.ig-benefits{gap:6px;padding:12px 13px}.ig-primary{min-height:51px}.ig-note{margin-top:6px}}
@media (prefers-reduced-motion:reduce){.ig-backdrop,.ig-panel,.ig-trail,.ig-gold-pointer,.ig-pointer-spark,.ig-target-ring{animation:none!important;transition:none!important}.ig-gold-pointer,.ig-target-ring,.ig-trail{display:none!important}}
@media (forced-colors:active){.ig-panel,.ig-step,.ig-benefits,.ig-browser-demo,.ig-primary{forced-color-adjust:auto;border:1px solid CanvasText}.ig-gold-pointer,.ig-target-ring,.ig-trail{display:none!important}}
/* Short phone screens: keep the confirmation action available while instructions scroll. */
@media (max-height:690px) and (max-width:760px){
 .ig-mark{height:44px;margin:0 0 5px}.ig-mark:before{width:54px;height:54px}.ig-mark img{width:39px;height:39px}.ig-stars{font-size:15px;left:calc(50% - 58px);top:1px}.ig-star-two{font-size:19px;left:calc(50% + 39px);top:30px}
 .ig-eyebrow{font-size:8px;margin-bottom:6px}.ig-panel h2{font-size:23px;line-height:1.15}.ig-description{font-size:11px;line-height:1.45;margin:7px auto 9px}
 .ig-benefits{padding:9px 12px;margin-bottom:8px;gap:5px}.ig-benefits span{font-size:10.5px}
 .ig-manual-title{margin-bottom:6px;font-size:10px}.ig-step{padding:6px 8px;gap:9px}.ig-step>span{width:22px;height:22px}.ig-step p{font-size:10.4px;line-height:1.45}
 .ig-browser-demo{padding:6px 9px 7px;margin-top:7px}.ig-toolbar{height:38px;margin-top:4px}
 .ig-actions{position:sticky;bottom:-1px;z-index:5;margin-top:10px;padding:8px 0 0;background:linear-gradient(0deg,#fcfbf7 90%,rgba(252,251,247,0))}
 .ig-primary{min-height:44px;padding:9px 15px}.ig-secondary{min-height:27px}
 .ig-note{display:none}
}