:root{--acc:#005eb8;--soft:#e8f1f8;--ink:#212b32;--ink2:#4c6272;--rule:#d8dde0;--rule2:#aeb7bd;--bg:#f0f4f5;--amb:#6b4a00;--ambsoft:#fff1c2;--yel:#ffb81c;--grn:#00703c;--grnsoft:#e3f1e8;--red:#d5281b;--redsoft:#fbe9e7;--r:6px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:400 17px/1.5 'Source Sans 3',Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
.ur{font-family:'Noto Naskh Arabic',serif;direction:rtl}
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* nav */
nav.top{background:var(--acc);color:#fff;position:sticky;top:0;z-index:20}
nav.top .wrap{display:flex;align-items:center;gap:28px;height:64px}
nav.top .logo img{height:36px;width:auto}
nav.top .links{display:flex;gap:24px;margin-left:auto;font-size:16px}
nav.top .links a{opacity:.92}
.urbtn{font:700 17px 'Noto Naskh Arabic',serif;border:1px solid #ffffff99;border-radius:var(--r);padding:1px 14px 4px;color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:var(--r);font:700 18px 'Source Sans 3',sans-serif;border:0;background:var(--grn);color:#fff;cursor:pointer;box-shadow:0 3px 0 #00401f}
.btn.s{background:#fff;color:var(--ink);box-shadow:0 3px 0 var(--rule2);border:1px solid var(--rule2)}
nav.top .btn{min-height:40px;font-size:16px;padding:0 18px}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--ambsoft);border-left:5px solid var(--yel);padding:5px 12px;font:600 15px/1.3 'Source Sans 3'}
.eyebrow{font:700 14px 'Source Sans 3';letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}
.tagline{font:700 24px/1.2 'Montserrat','Source Sans 3',sans-serif;color:var(--acc);letter-spacing:-.01em}
h1{font:700 52px/1.08 'Source Sans 3';letter-spacing:-.02em}
h2{font:700 34px/1.12 'Source Sans 3';letter-spacing:-.015em}
h3{font:700 20px/1.25 'Source Sans 3'}
.sub{font-size:21px;color:var(--ink2);line-height:1.4}
section{padding:64px 0}
.line{color:var(--ink2);font-size:17px;line-height:1.4}
/* phone frame */
.ph{border:8px solid var(--ink);border-radius:34px;background:var(--ink);overflow:hidden;box-shadow:0 24px 48px -16px #212b3266,0 4px 10px #212b3226}
.ph img{width:100%;aspect-ratio:390/844;object-fit:cover;object-position:top}
/* crop card */
.crop{background:#fff;border:1px solid var(--rule2);border-radius:10px;overflow:hidden;box-shadow:0 14px 28px -14px #212b3255}
.crop img{width:100%;height:100%;object-fit:cover;object-position:top}
/* messy whatsapp photo */
.wa{background:#d9fdd3;border-radius:12px 12px 2px 12px;padding:5px 5px 18px;position:relative;box-shadow:0 10px 24px -10px #212b3266}
.wa .t{position:absolute;right:8px;bottom:2px;font:600 11px 'Source Sans 3';color:#5b7a66;display:flex;gap:3px;align-items:center}
.wa .t svg{width:14px;height:10px;stroke:#34a3d6;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.msy{position:relative;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:#8d897c}
.msy .sheet{position:absolute;inset:7% 6% 5% 9%;background:repeating-linear-gradient(#eee7d3 0 22px,#b9c2cf 22px 23px);transform:rotate(-5deg) skewX(-3deg);box-shadow:inset 0 0 40px #8a7a4a66,6px 10px 20px #0006;padding:14% 10% 0;filter:blur(.9px) contrast(.92) saturate(.8)}
.msy .hw{font:500 25px/23px 'Caveat',cursive;color:#2a3470;white-space:pre-line;transform:rotate(-1deg);letter-spacing:.2px}
.msy .hw small{font-size:19px;color:#4b5a8c}
.msy .hw b{font:700 18px/1 'Caveat';color:#8a2430;position:absolute;right:8%;top:6%;transform:rotate(8deg);border:2px solid #8a2430;border-radius:50%;padding:4px 8px}
.msy:after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 20% 0,#ffffff55 0,transparent 40%),radial-gradient(90% 70% at 100% 100%,#00000038,transparent 60%);pointer-events:none}
.msy .glare{position:absolute;left:-20%;top:50%;width:70%;height:16px;background:#fff7;filter:blur(8px);transform:rotate(-25deg);z-index:2}
/* invite band */
.invite{background:var(--acc);color:#fff}
.invite .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.invite h2{color:#fff}.invite p{color:#dcebf8;margin-top:8px;font-size:18px}
.form{display:flex;gap:12px}
.form input{flex:1;min-width:0;height:52px;border-radius:var(--r);border:2px solid #fff;background:#fff;color:var(--ink);padding:0 14px;font:400 18px 'Source Sans 3'}
.form .btn{height:52px}
.fine{font-size:14px;color:#dcebf8;margin-top:10px}
/* faq */
.faq .grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-items:start;margin-top:24px}
.faq details:not(.acc){background:#fff;border:1px solid var(--rule);margin-bottom:-1px}
.faq details:not(.acc)>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 16px;font:700 17px/1.35 'Source Sans 3';min-height:52px}
.faq details>summary::-webkit-details-marker{display:none}
.faq details:not(.acc)>summary:after{content:"";width:9px;height:9px;border-right:2.5px solid var(--acc);border-bottom:2.5px solid var(--acc);transform:rotate(45deg);flex:none;margin-right:4px}
.faq details:not(.acc)[open]>summary:after{transform:rotate(-135deg)}
.faq details:not(.acc) p{color:var(--ink2);padding:0 16px 16px;font-size:16.5px}
/* footer */
footer{background:#fff;padding:32px 0 40px;font-size:15px;color:var(--ink2);border-top:1px solid var(--rule)}
footer .wrap{display:flex;gap:40px;justify-content:space-between;align-items:center}
footer img{height:48px;width:auto}
footer .disc{max-width:600px;background:var(--ambsoft);border-left:6px solid var(--yel);padding:10px 14px;font:600 16px/1.4 'Source Sans 3';color:var(--ink)}
.privacy{display:flex;gap:14px;align-items:flex-start;font:600 19px/1.4 'Source Sans 3'}
@media(max-width:760px){
body{font-size:16px}
.wrap{padding:0 16px}
nav.top .wrap{height:52px;gap:12px}nav.top .links,nav.top .btn{display:none}nav.top .urbtn{margin-left:auto}nav.top .logo img{height:30px}
h1{font-size:30px;line-height:1.1}h2{font-size:24px}h3{font-size:18px}
.tagline{font-size:20px}.sub{font-size:17px}
section{padding:36px 0}
.btn{width:100%}
.invite .wrap{grid-template-columns:1fr;gap:18px}.form{flex-direction:column}
.faq .grid{grid-template-columns:1fr;margin-top:14px}.faq summary{font-size:16px;padding:12px 14px;min-height:48px}
footer .wrap{flex-direction:column;align-items:flex-start;gap:14px}footer{padding:24px 0}
.privacy{font-size:16.5px}
}
/* accordions + bottom nav */
.chev{display:none}
.acc>summary{list-style:none;display:none}.acc>summary::-webkit-details-marker{display:none}
.bnav{display:none}
.urdu-s{background:var(--soft);padding:40px 0}
.urdu-s .ab{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.urdu-s .big{font:700 34px/1.8 'Noto Naskh Arabic',serif;direction:rtl}
.urdu-s .urn{background:var(--ambsoft);border-right:6px solid var(--yel);padding:10px 16px;font:600 20px/1.9 'Noto Naskh Arabic',serif;direction:rtl}
.tile .fillbox{position:relative}
@media(max-width:760px){
body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
nav.top{position:static}
.cta{display:none!important}
.acc>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:0 16px;cursor:pointer}
.acc>summary h2{font-size:18px;letter-spacing:0}
.chev{display:block;width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s;flex:none}
.acc[open]>summary .chev{transform:rotate(180deg)}
.acc .desk{display:none!important}
.acc>.ab{padding:0 16px 16px}
section.asec{padding:0!important;background:#fff;border-bottom:1px solid var(--rule)}
section.asec .wrap{padding:0}
.invite{padding:22px 0}.invite p{display:none}.invite .fine{display:block}.invite h2{font-size:21px;margin-top:8px!important}.invite .chip{font-size:13px;padding:3px 10px}
.urdu-s{padding:0;background:#fff;border-bottom:1px solid var(--rule)}.urdu-s .ab{display:block}.urdu-s .big{font-size:22px;line-height:1.8}.urdu-s .urn{font-size:16.5px;margin-top:10px;padding:8px 12px}
.bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;height:calc(62px + env(safe-area-inset-bottom));padding:6px 8px env(safe-area-inset-bottom);gap:6px;background:#fff;border-top:1px solid var(--rule2);box-shadow:0 -4px 14px -8px #212b3240;align-items:stretch}
.bnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:600 12px/1.1 'Source Sans 3';color:var(--ink2);border-radius:var(--r)}
.bnav a .ic{width:22px;height:22px;color:var(--acc)}
.bnav a.p{flex:1.9;background:var(--grn);color:#fff;font:700 15px 'Source Sans 3';flex-direction:row;gap:8px;box-shadow:0 3px 0 #00401f}.bnav a.p .ic{color:#fff}
.bnav a .u{font:700 18px/1 'Noto Naskh Arabic',serif;color:var(--acc);height:22px;display:block}
.faq .grid{margin-top:0}.faq .ab{padding:0}.faq details:not(.acc)>summary{font-size:16px;padding:12px 14px;min-height:48px}.faq details:not(.acc){margin-bottom:-1px}.faq .acc>.ab>.grid{padding:0}.faq details:not(.acc) p{font-size:15px}
footer .wrap{gap:10px}footer img{height:40px}footer .disc{font-size:14px;padding:8px 12px}
}

.trl{padding:28px 0 40px}.trl .privacy{font:600 19px/1.4 'Source Sans 3'}
footer img{height:44px}footer .disc{padding:8px 14px;font-size:16px}
@media(max-width:760px){.trl{padding:14px 0 14px}.trl .privacy{font-size:15px}footer .wrap{flex-direction:row;align-items:center;justify-content:space-between}footer img{height:34px}footer .disc{font-size:14px}}

@media (hover:hover) and (pointer:fine){nav.top .links a:hover{text-decoration:underline;text-underline-offset:4px}}