/* MCCM design system v2: Apple-style product design + iOS widgets. Emerald, gold, ivory. */
:root{
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bg:#DDF0E4;--bg2:#CDE7D7;--surface:#FFFFFF;--surface2:#F4FAF5;--ink:#0B2A20;--muted:#5B6B63;--line:rgba(11,42,32,.10);
  --em:#023325;--em2:#0F5A43;--gold:#B98A2E;--gl:#D9B76A;--ivory:#F2EEDF;
  --glass:rgba(226,243,232,.78);--page:radial-gradient(1100px 700px at 8% -6%,rgba(150,208,172,.70),transparent 62%),radial-gradient(900px 700px at 100% 28%,rgba(168,220,188,.65),transparent 60%),radial-gradient(1000px 800px at 0% 88%,rgba(160,214,182,.60),transparent 60%),linear-gradient(180deg,#E6F5EB 0%,#D2EBDC 48%,#DDF0E4 100%);--seg:rgba(11,42,32,.07);
  --r1:12px;--r2:18px;--r3:24px;--r4:32px;--pill:980px;
  --sh1:0 1px 2px rgba(2,51,37,.05),0 10px 28px rgba(2,51,37,.07);
  --sh2:0 2px 6px rgba(2,51,37,.06),0 30px 64px rgba(2,51,37,.15);
  --g-em:linear-gradient(145deg,#0F5A43 0%,#023325 72%);
  --g-gold:linear-gradient(145deg,#E2C37C 0%,#B98A2E 100%);
  /* legacy aliases */
  --mc-bg:var(--bg);--mc-surface:var(--surface);--mc-ink:var(--ink);--mc-muted:var(--muted);--mc-line:var(--line);--mc-brand:var(--ink);--mc-brand2:var(--em2);--mc-gold:var(--gold);--mc-gold-l:var(--gl);
  --mc-shadow:var(--sh1);--mc-shadow-lg:var(--sh2);--mc-g-card:var(--surface);--mc-g-dark:var(--g-em);--mc-g-line:linear-gradient(90deg,transparent,#B98A2E,#D9B76A,#B98A2E,transparent);
}
html[data-theme="dark"]{color-scheme:dark;
  --bg:#050E0A;--bg2:#0B1812;--surface:#0F1D16;--surface2:#142419;--ink:#F2EEE0;--muted:#9BAFA4;--line:rgba(242,238,224,.12);
  --glass:rgba(7,18,13,.72);--page:linear-gradient(180deg,#07140E 0%,#050E0A 60%,#08170F 100%);--seg:rgba(242,238,224,.10);
  --sh1:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.4);--sh2:0 2px 6px rgba(0,0,0,.5),0 30px 64px rgba(0,0,0,.6);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);background-color:var(--bg);background-attachment:scroll;color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.47;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--f);font-weight:700;letter-spacing:-.03em;line-height:1.07;color:var(--ink);margin:0}
a{color:var(--em2);text-decoration:none}
html[data-theme="dark"] a{color:#8FD1B3}
::selection{background:var(--gold);color:#0B2A20}

/* ---------- header: slim glass bar ---------- */
#site-header{background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100;padding:0;transition:box-shadow .25s}
.admin-bar #site-header{top:32px}
@media(max-width:782px){.admin-bar #site-header{top:46px}}
#site-header.is-scrolled{box-shadow:0 6px 24px rgba(2,51,37,.08)}
#site-header .header-inner{max-width:1280px;width:100%;margin:0 auto;padding:0 22px;height:62px;display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
#site-header .site-branding{margin-right:auto;flex:none}
#site-header .site-logo img,#site-header .custom-logo{height:48px;width:auto;display:block}
html[data-theme="dark"] #site-header .site-logo img,html[data-theme="dark"] #site-header .custom-logo{background:#F6F3EA;border-radius:12px;padding:3px 9px;height:44px}
#site-header .site-navigation ul.menu{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
#site-header .site-navigation a{font:400 13px/1 var(--f);letter-spacing:-.01em;text-transform:none;color:var(--ink);opacity:.8;padding:8px 0;border:0;background:none;white-space:nowrap;transition:opacity .2s}
#site-header .site-navigation a:hover,#site-header .site-navigation .current-menu-item>a{opacity:1;background:none;color:var(--ink)}
#site-header .site-navigation .current-menu-item>a{font-weight:600}
#site-header .site-navigation li.mc-cta>a{background:var(--g-gold);color:#0B2A20;opacity:1;padding:9px 18px;border-radius:var(--pill);font-weight:600;transition:transform .2s,box-shadow .2s}
#site-header .site-navigation li.mc-cta>a:hover{transform:scale(1.04);color:#0B2A20;box-shadow:0 8px 20px rgba(185,138,46,.35)}
#site-header .site-navigation-toggle-icon,#site-header .site-navigation-toggle-icon:before,#site-header .site-navigation-toggle-icon:after{background:var(--ink)}
#site-header .site-navigation-dropdown{background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);border-top:1px solid var(--line)}
#site-header .site-navigation-dropdown a{color:var(--ink);font:500 17px/1.3 var(--f);text-transform:none;letter-spacing:-.01em;padding:12px 6px;opacity:1}
#site-header .site-navigation li.menu-item-has-children{position:relative}
#site-header .site-navigation li.menu-item-has-children:after{color:var(--ink);font-size:11px;opacity:.7}
#site-header .site-navigation li.menu-item-has-children>a:after{display:none!important}
#site-header .site-navigation ul.sub-menu{position:absolute;top:100%;left:50%;transform:translate(-50%,8px);min-width:250px;margin:12px 0 0;padding:8px;list-style:none;background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--sh2);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;z-index:120;display:block}
#site-header .site-navigation li.menu-item-has-children:hover>ul.sub-menu,#site-header .site-navigation li.menu-item-has-children:focus-within>ul.sub-menu,#site-header .site-navigation li.menu-item-has-children.open>ul.sub-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
#site-header .site-navigation ul.sub-menu li{display:block;margin:0}
#site-header .site-navigation ul.sub-menu a{display:block;padding:11px 14px;border-radius:12px;font-size:14px;opacity:1}
#site-header .site-navigation ul.sub-menu a:hover{background:var(--seg)}
#site-header .site-navigation-dropdown ul.sub-menu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;background:transparent;margin:0 0 6px 12px;padding:0;min-width:0;-webkit-backdrop-filter:none;backdrop-filter:none}
button.ma-theme,button.ma-theme:hover,button.ma-theme:focus,.ma-acct{width:36px;height:36px;border-radius:50%;border:0;background:var(--seg);color:var(--ink);display:inline-grid;place-items:center;padding:0;cursor:pointer;flex:none;box-shadow:none;font:600 14px var(--f);text-decoration:none;transition:transform .2s,background .2s}
button.ma-theme:hover,.ma-acct:hover{transform:scale(1.06)}
.ma-acct.on{background:var(--g-em);color:var(--gl)}
@media(max-width:1180px){#site-header .site-navigation ul.menu{gap:18px}#site-header .site-navigation a{font-size:12.5px}}
@media(max-width:767px){#site-header .header-inner{padding:0 14px;height:56px}#site-header .site-logo img,#site-header .custom-logo{height:42px}}

/* ---------- footer ---------- */
#site-footer{background:var(--bg2);color:var(--muted);padding:48px 0 38px;border-top:1px solid var(--line)}
#site-footer .footer-inner{max-width:1160px;margin:0 auto;padding:0 22px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
#site-footer .site-title a{font:700 22px/1.1 var(--f);letter-spacing:-.03em;color:var(--ink)}
html[data-theme="dark"] #site-footer .site-title a{color:var(--ink)}
#site-footer .site-description{margin:0;color:var(--muted);font-size:14px}
#site-footer ul.menu{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;list-style:none;margin:0;padding:0}
#site-footer .site-navigation a{color:var(--ink);font:400 13px var(--f);letter-spacing:-.01em;text-transform:none;opacity:.75}
#site-footer .site-navigation a:hover{opacity:1}
#site-footer .copyright p{margin:0;font-size:12px;color:var(--muted)}

/* ---------- layout ---------- */
.mc-wrap{max-width:1160px;margin:0 auto;padding:0 22px}
.mc-narrow{max-width:760px;margin:0 auto;padding:0 22px}
.mc-section{padding:96px 0}
.mc-section.tight{padding:40px 0 80px}
.mc-center{text-align:center}
.mc-label{font:600 12px var(--f);text-transform:uppercase;letter-spacing:.06em;color:var(--gold)}
.mc-h2{font-size:clamp(32px,4.6vw,56px);margin-bottom:16px}
.mc-notice{font-size:13.5px;color:var(--muted);margin:14px 0 0}
.mc-empty,.ma-empty{color:var(--muted);text-align:center;padding:26px 0}
.mc-dark{background:var(--g-em);color:#E4DFCB}
.mc-dark h1,.mc-dark h2,.mc-dark h3{color:#F6F3EA;background:none;-webkit-text-fill-color:currentColor}
.mc-rule{display:none}

/* inner-page hero: large centered title, Apple style */
.mc-hero{background:transparent;color:var(--ink);text-align:center;padding:84px 0 30px;position:relative;overflow:hidden}
.mc-hero .mc-star{display:none}
.mc-hero h1{font-size:clamp(40px,6.4vw,76px);max-width:900px;margin:0 auto 18px;color:var(--ink);background:none;-webkit-text-fill-color:currentColor;letter-spacing:-.04em}
.mc-hero p.mc-lead{font-size:clamp(18px,2.2vw,24px);line-height:1.35;color:var(--muted);max-width:640px;margin:0 auto;letter-spacing:-.015em}
.mc-khatma-hdr{font:400 34px/1.5 Amiri,serif;color:var(--gold);margin-bottom:8px}

/* ---------- buttons: pills ---------- */
.mc-btn,button.mc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 17px/1.1 var(--f);letter-spacing:-.011em;text-transform:none;text-decoration:none;padding:15px 28px;border-radius:var(--pill);border:1px solid transparent;cursor:pointer;box-shadow:none;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.mc-btn:hover{transform:scale(1.03)}
.mc-btn.emerald,button.mc-btn.emerald,button.mc-btn.emerald:hover{background:var(--g-em);color:#F6F3EA;border-color:transparent;box-shadow:0 10px 24px rgba(2,51,37,.22)}
.mc-btn.gold{background:var(--g-gold);color:#0B2A20;box-shadow:0 10px 26px rgba(185,138,46,.34)}
.mc-btn.ghost{background:rgba(255,255,255,.12);color:#F6F3EA;border-color:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mc-btn.line,button.mc-btn.line{background:transparent;color:var(--ink);border-color:var(--ink)}
.mc-btn.line:hover,button.mc-btn.line:hover{background:var(--ink);color:var(--bg)}
.mc-btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center}
.mc-link{display:inline-flex;align-items:center;gap:6px;font:500 17px var(--f);color:var(--em2);text-decoration:none}
.mc-link:after{content:"\203A";font-size:1.25em;line-height:1;transition:transform .2s}
.mc-link:hover:after{transform:translateX(3px)}
html[data-theme="dark"] .mc-link{color:#8FD1B3}
.mc-btn:focus-visible,.mc-field:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid rgba(185,138,46,.55);outline-offset:3px}

/* ---------- forms ---------- */
.mc-field{width:100%;font:400 17px/1.3 var(--f);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r1);padding:14px 16px;box-shadow:none;transition:border-color .2s,box-shadow .2s;appearance:none}
.mc-field:focus{border-color:var(--em2);box-shadow:0 0 0 4px rgba(15,90,67,.18);outline:0}
.mc-field::placeholder{color:#8A9A92}
select.mc-field{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.mc-lab{display:block;font:600 13px var(--f);letter-spacing:0;text-transform:none;color:var(--muted);margin:0 0 6px}
.mc-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mc-fields .full{grid-column:1/-1}
.mc-ok,.ma-msg.ok{background:rgba(15,90,67,.10);color:var(--ink);padding:14px 18px;border-radius:var(--r1);margin-bottom:18px}
.ma-msg{margin:6px 0 14px}
.ma-msg.bad{background:rgba(160,50,38,.10);color:#8C2F23;padding:14px 18px;border-radius:var(--r1)}
html[data-theme="dark"] .ma-msg.bad{color:#F3B8AE}
.ma-f{margin-bottom:14px}
.ma-bigin{font-size:18px!important;padding:16px 18px!important}
.mc-form-panel{max-width:640px;margin:0 auto 96px!important;background:var(--surface);border-radius:var(--r4);padding:34px!important;box-shadow:var(--sh1)}
.mc-form-panel .elementor-widget-shortcode{width:100%}
@media(max-width:800px){.mc-form-panel{margin:0 16px 64px!important;max-width:none}}
/* iOS switch */
.ma-check{display:flex;align-items:center;gap:14px;margin:10px 0;font-size:17px;cursor:pointer}
.ma-check input[type=checkbox]{appearance:none;-webkit-appearance:none;width:51px;height:31px;border-radius:99px;background:rgba(120,130,125,.35);position:relative;flex:none;cursor:pointer;transition:background .25s;margin:0;border:0}
.ma-check input[type=checkbox]:after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.3);transition:transform .25s}
.ma-check input[type=checkbox]:checked{background:var(--em2)}
.ma-check input[type=checkbox]:checked:after{transform:translateX(20px)}

/* ---------- cards, grouped lists ---------- */
.mc-panel{background:var(--surface);border-radius:var(--r3);padding:30px;box-shadow:var(--sh1);border:0}
.mc-panel h2{font-size:28px;margin-bottom:18px}
.mc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;background:none;border:0;box-shadow:none}
.mc-stat{background:var(--surface);border-radius:var(--r3);padding:22px 22px 20px;box-shadow:var(--sh1);border:0}
.mc-stat .l{font:600 12px var(--f);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.mc-stat .v{font:700 clamp(34px,4vw,48px)/1.05 var(--f);letter-spacing:-.04em;color:var(--ink);margin-top:8px}
.mc-stat .s{font-size:14px;color:var(--muted);margin-top:2px}
.mc-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.mc-bar{height:12px;border-radius:99px;background:var(--seg);overflow:hidden;margin:14px 0 8px}
.mc-bar>i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#0F5A43,#B98A2E 65%,#D9B76A);transition:width .4s}
.mc-meta{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.mc-table{width:100%;border-collapse:collapse}
.mc-table th{font:600 12px var(--f);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:12px 10px;border-bottom:1px solid var(--line)}
.mc-table td{padding:15px 10px;border-bottom:1px solid var(--line);font-size:16px}
.mc-table td:last-child,.mc-table th:last-child{text-align:right}
.mc-del,button.mc-del,button.mc-del:hover{background:transparent;border:1px solid rgba(160,50,38,.35);color:#A03226;border-radius:var(--pill);padding:6px 14px;font:500 13px var(--f);cursor:pointer}
html[data-theme="dark"] .mc-del{color:#F0A89C;border-color:rgba(240,168,156,.4)}
/* segmented controls */
.ma-tabs,.ma-tabs2{display:inline-flex;gap:2px;background:var(--seg);padding:3px;border-radius:12px;margin:0 0 24px;flex-wrap:wrap}
.ma-tabs2{display:grid;grid-template-columns:1fr 1fr;width:100%}
.ma-tabs button,.ma-tabs2 button,.ma-tabs button:hover,.ma-tabs2 button:hover,.ma-tabs button:focus,.ma-tabs2 button:focus{background:transparent;border:0;border-radius:9px;padding:9px 18px;color:var(--ink);font:500 14px var(--f);text-transform:none;letter-spacing:-.01em;cursor:pointer;margin:0;box-shadow:none}
.ma-tabs button.on,.ma-tabs2 button.on,.ma-tabs button.on:hover,.ma-tabs2 button.on:hover{background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.14);font-weight:600}
button.ma-link,button.ma-link:hover,button.ma-link:focus,.ma-link{background:none;border:0;padding:0;font:500 15px var(--f);color:var(--em2);text-decoration:none;cursor:pointer;box-shadow:none;border-radius:0}
html[data-theme="dark"] button.ma-link{color:#8FD1B3}
button.ma-link.danger,button.ma-link.danger:hover{color:#C0392B}
.ma-link:hover{text-decoration:underline}
.ma-more{display:inline-block;margin-top:10px;font:500 15px var(--f);color:var(--em2)}
.ma-more:after{content:" \203A"}
.ma-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ---------- widgets (iOS) ---------- */
.stage{border-radius:44px;padding:clamp(14px,2.4vw,28px);background:radial-gradient(900px 500px at 15% 0%,rgba(185,138,46,.28),transparent 55%),radial-gradient(800px 500px at 100% 100%,rgba(15,90,67,.9),transparent 60%),linear-gradient(160deg,#04281D,#021A12);box-shadow:var(--sh2);position:relative;overflow:hidden}
.wgrid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(168px,auto);gap:14px}
.wg{display:flex;flex-direction:column;justify-content:space-between;border-radius:var(--r3);padding:18px 18px 16px;color:var(--ink);text-decoration:none;position:relative;overflow:hidden;min-height:168px;transition:transform .25s,box-shadow .25s;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.12),0 12px 28px rgba(0,0,0,.18)}
.wg:hover{transform:translateY(-3px) scale(1.01)}
.wg-m{grid-column:span 2}.wg-l{grid-column:span 2;grid-row:span 2}
.wg-em{background:var(--g-em);color:#F2EEDF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 12px 28px rgba(0,0,0,.28)}
.wg-gold{background:var(--g-gold);color:#0B2A20}
.wg-glass{background:rgba(246,243,234,.14);-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);color:#F6F3EA;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.wg-cream{background:linear-gradient(160deg,#FBF4DF,#F1E6C4);color:#0B2A20}
.wg-h{display:flex;align-items:center;gap:8px;font:600 12px var(--f);text-transform:uppercase;letter-spacing:.05em;opacity:.8}
.wg-ic{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--g-gold);color:#0B2A20}
.wg-em .wg-ic{background:rgba(255,255,255,.18);color:var(--gl)}
.wg-ic svg{width:14px;height:14px}
.wg-lab{font:600 12px var(--f);text-transform:uppercase;letter-spacing:.05em;color:var(--gold)}
.wg-big{font:700 clamp(34px,4.4vw,52px)/1 var(--f);letter-spacing:-.04em}
.wg-time{font:600 22px var(--f);letter-spacing:-.02em;color:var(--gl)}
.wg-gold .wg-time,.wg-cream .wg-time{color:#0B2A20}
.wg-sub{font-size:14px;opacity:.78;line-height:1.3}
.wg-num{font:700 64px/1 var(--f);letter-spacing:-.05em}
.wg-hijri{font-size:12.5px;color:var(--muted)}
.wg-ring{position:relative;width:92px;height:92px;margin:2px auto 0}
.wg-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.wg-ring .t{fill:none;stroke:var(--seg);stroke-width:9}.wg-ring .b{fill:none;stroke:url(#wgg);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .6s}
.wg-ring b{position:absolute;inset:0;display:grid;place-content:center;font:700 22px var(--f);letter-spacing:-.03em}
.wg-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:2px}
.wg-list li{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:12px;font:500 16px var(--f)}
.wg-list li span:last-child{font-variant-numeric:tabular-nums;color:var(--muted)}
.wg-list li.on{background:var(--g-em);color:#F2EEDF}.wg-list li.on span:last-child{color:var(--gl);font-weight:600}
.wg-ar{font:400 30px/1.55 Amiri,serif;direction:rtl;text-align:right;color:var(--em)}
.wg-heart{font-size:0;line-height:0}.wg-heart svg{width:40px;height:40px}
html[data-theme="dark"] .wg-cream{background:linear-gradient(160deg,#17291F,#101E17);color:var(--ink)}
html[data-theme="dark"] .wg-ar{color:var(--gl)}

/* ---------- Apple-style home sections ---------- */
.ap-hero{padding:76px 0 40px;text-align:center}
.ap-kicker{font:600 17px var(--f);letter-spacing:-.01em;color:var(--gold);margin:0 0 14px}
.ap-h1{font-size:clamp(40px,7vw,88px);line-height:1.04;letter-spacing:-.045em;max-width:1000px;margin:0 auto 20px}
.ap-sub{font-size:clamp(19px,2.4vw,28px);line-height:1.3;color:var(--muted);max-width:720px;margin:0 auto 30px;letter-spacing:-.02em}
.ap-cta{display:flex;gap:26px;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:56px}
.ap-sec{padding:96px 0}
.ap-h2{font-size:clamp(34px,5.4vw,64px);letter-spacing:-.04em;text-align:center;max-width:860px;margin:0 auto 14px}
.ap-lead{text-align:center;font-size:clamp(18px,2vw,24px);color:var(--muted);max-width:640px;margin:0 auto 52px;letter-spacing:-.015em}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.tile{display:flex;flex-direction:column;justify-content:space-between;gap:34px;min-height:420px;border-radius:var(--r4);padding:40px;background:var(--surface);box-shadow:var(--sh1);color:var(--ink);text-decoration:none;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.tile:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.tile h3{font-size:clamp(28px,3.4vw,42px);letter-spacing:-.035em;margin:6px 0 10px}
.tile p{margin:0;max-width:34ch;opacity:.8;font-size:19px;line-height:1.35;letter-spacing:-.015em}
.tile .k{font:600 14px var(--f);text-transform:none;letter-spacing:-.01em;color:var(--gold)}
.tile-dark{background:var(--g-em);color:#F2EEDF}.tile-dark h3{color:#F6F3EA}.tile-dark .k{color:var(--gl)}
.tile-gold{background:var(--g-gold);color:#0B2A20}.tile-gold h3{color:#0B2A20}.tile-gold .k{color:#4A3510}
.tile .mc-link{margin-top:18px}.tile-dark .mc-link{color:var(--gl)}.tile-gold .mc-link{color:#0B2A20}
.tile .art{position:absolute;right:-30px;bottom:-40px;opacity:.16;width:300px;pointer-events:none}
.tile .art.ar{font:400 170px/1 Amiri,serif;opacity:.14;width:auto;right:20px;bottom:0;color:var(--em)}
.tile-dark .art.ar{color:var(--gl)}
.ap-dark{background:var(--g-em);color:#E4DFCB;padding:110px 0;text-align:center}
.ap-dark .ap-h2{color:#F6F3EA}
.ap-dark .ap-lead{color:#C9C3AE}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}
.pillar{border-radius:var(--r3);padding:30px;background:rgba(246,243,234,.08);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.pillar .ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--g-gold);color:#0B2A20;margin-bottom:18px}
.pillar h3{color:#F6F3EA;font-size:26px;margin-bottom:8px}.pillar p{margin:0;color:#C9C3AE;font-size:17px}
/* FAQ: iOS grouped list */
.mc-faq{max-width:780px;margin:0 auto;background:var(--surface);border-radius:var(--r3);box-shadow:var(--sh1);overflow:hidden;display:block}
.mc-faq details{border-bottom:1px solid var(--line)}.mc-faq details:last-child{border-bottom:0}
.mc-faq summary{cursor:pointer;list-style:none;padding:22px 26px;font:600 19px/1.3 var(--f);letter-spacing:-.02em;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--ink)}
.mc-faq summary::-webkit-details-marker{display:none}
.mc-faq summary:after{content:"\203A";font:400 30px/1 var(--f);color:var(--muted);transform:rotate(90deg);transition:transform .25s}
.mc-faq details[open] summary:after{transform:rotate(-90deg)}
.mc-faq details p{margin:0;padding:0 26px 24px;color:var(--muted);max-width:62ch}
.ap-cta-band{background:var(--g-gold);color:#0B2A20;border-radius:var(--r4);padding:72px 28px;text-align:center;position:relative;overflow:hidden}
.ap-cta-band h2{color:#0B2A20;font-size:clamp(34px,5vw,60px);margin-bottom:12px}
.ap-cta-band p{max-width:520px;margin:0 auto 28px;font-size:20px;opacity:.85}
.ap-cta-band .mc-btn.emerald{box-shadow:0 12px 28px rgba(2,51,37,.3)}

/* ---------- reveal ---------- */
.mc-js .mc-reveal{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.mc-js .mc-reveal.mc-in{opacity:1;transform:none}
.mc-js .mc-reveal.d1{transition-delay:.08s}.mc-js .mc-reveal.d2{transition-delay:.16s}.mc-js .mc-reveal.d3{transition-delay:.24s}

/* ---------- floating donate, banner, toast ---------- */
.mc-fab{position:fixed;right:20px;bottom:20px;z-index:90;display:inline-flex;align-items:center;gap:8px;background:var(--g-gold);color:#0B2A20;text-decoration:none;font:600 15px var(--f);padding:13px 20px;border-radius:var(--pill);box-shadow:0 14px 32px rgba(185,138,46,.42);transition:transform .2s}
.mc-fab:hover{transform:scale(1.05);color:#0B2A20}
@media(max-width:560px){.mc-fab span{display:none}.mc-fab{padding:15px}}
.ma-banner{background:var(--bg2);color:var(--ink);text-align:center;padding:10px 44px;font:400 13.5px var(--f);position:relative;border-bottom:1px solid var(--line)}
.ma-banner a{color:var(--em2);font-weight:500}
.ma-banner button,.ma-banner button:hover{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:transparent;border:0;color:var(--ink);font-size:20px;cursor:pointer;line-height:1;padding:0}
.ma-toast{position:fixed;left:50%;top:76px;transform:translate(-50%,-14px);opacity:0;background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:var(--ink);padding:12px 22px;border-radius:var(--pill);font:500 15px var(--f);box-shadow:var(--sh2);z-index:9999;transition:all .3s;max-width:90vw}
.ma-toast.in{opacity:1;transform:translate(-50%,0)}.ma-toast.bad{color:#A03226}

/* ---------- app views ---------- */
#mccm-app{padding:28px 0 96px}
.ma-signin{background:var(--surface);border-radius:var(--r4);padding:34px;box-shadow:var(--sh1);max-width:880px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ma-signin strong,.ma-auth h2{font:700 30px/1.1 var(--f);letter-spacing:-.03em;color:var(--ink)}
.ma-signin .who,.ma-acchead .who{display:grid;gap:4px}
.st{font-size:15px;color:var(--muted)}
.ma-auth{max-width:520px;margin:0 auto;background:var(--surface);border-radius:var(--r4);padding:36px;box-shadow:var(--sh2)}
.ma-auth h2{margin:0 0 6px}.ma-auth .st{margin:0 0 20px}
.ma-or{text-align:center;color:var(--muted);margin:22px 0 0;font-size:13px;text-transform:uppercase;letter-spacing:.1em}
.mc-auth{display:none;max-width:1160px;margin:22px auto 0;padding:16px 22px;background:var(--surface);border-radius:var(--r3);box-shadow:var(--sh1);align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.mc-auth:not(:empty){display:flex}
.mc-auth .who{display:grid;gap:2px}.mc-auth .who strong{font:700 20px var(--f);letter-spacing:-.02em;color:var(--ink)}
.mc-auth .act,.ma-acchead .act{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.mc-auth .act .mc-btn{white-space:nowrap;padding:12px 22px;font-size:15px}
@media(max-width:700px){.mc-auth{margin:16px 0}}
.ma-h{font-size:30px;margin:0 0 18px;letter-spacing:-.035em}
.ma-sub{font-size:20px;margin:22px 0 12px}
.ma-sect{margin-bottom:34px}
.ma-two{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;align-items:start}
.ma-two>.mc-panel{margin:0}
.ma-meta{font-size:14px;color:var(--muted)}
.ma-copy{margin-top:8px}.ma-copy p{margin:0 0 8px}
.ma-event{display:grid;grid-template-columns:64px 1fr;gap:18px;background:var(--surface);border-radius:var(--r3);padding:20px;margin-bottom:14px;box-shadow:var(--sh1)}
.ma-event>.ma-rsvp{grid-column:1/-1;border-top:1px solid var(--line);padding-top:14px;display:grid;gap:10px}
.ma-date{display:flex;flex-direction:column;width:64px;border-radius:14px;overflow:hidden;background:var(--surface2);box-shadow:inset 0 0 0 1px var(--line);text-align:center}
.ma-date span{order:-1;background:var(--g-em);color:#F2EEDF;font:600 10.5px var(--f);letter-spacing:.08em;padding:4px 0}
.ma-date b{font:700 28px/1.1 var(--f);letter-spacing:-.04em;color:var(--ink);padding:6px 0 8px}
.ma-ebody h3,.ma-news h3{font-size:22px;margin:0 0 4px;letter-spacing:-.025em}
.ma-news{background:var(--surface);border-radius:var(--r3);padding:22px;margin-bottom:14px;box-shadow:var(--sh1)}
.ma-news.pin{box-shadow:inset 3px 0 0 var(--gold),var(--sh1)}
.ma-li{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap;background:var(--surface);border-radius:var(--r2);padding:16px 20px;margin-bottom:10px;box-shadow:var(--sh1)}
/* prayer */
.ma-today{background:var(--g-em);color:#F2EEDF;border-radius:var(--r4);padding:clamp(22px,3vw,34px);box-shadow:var(--sh2);margin-bottom:36px}
.ma-today .mc-label{color:var(--gl)}
.ma-tophead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.ma-date-big{font:700 clamp(28px,3.6vw,42px)/1.08 var(--f);letter-spacing:-.035em;color:#F6F3EA;margin-top:4px}
.ma-today .ma-meta{color:#BFD3C8}
.ma-count{text-align:right;display:grid;gap:2px}
.ma-count b{font:700 clamp(44px,6vw,64px)/1 var(--f);letter-spacing:-.05em;color:#F6F3EA;font-variant-numeric:tabular-nums}
.ma-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.ma-tile{background:rgba(246,243,234,.1);border-radius:var(--r2);padding:16px 10px;text-align:center;display:grid;gap:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ma-tile span{font:600 12px var(--f);text-transform:uppercase;letter-spacing:.05em;color:#BFD3C8}
.ma-tile b{font:600 22px var(--f);letter-spacing:-.02em;color:#F6F3EA;white-space:nowrap;font-variant-numeric:tabular-nums}
.ma-tile.next{background:var(--g-gold);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.ma-tile.next span,.ma-tile.next b{color:#0B2A20}
.ma-tile.soft{background:transparent}
.ma-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:20px;align-items:center}
.ma-today button.ma-link,.ma-today .ma-link{color:var(--gl)}
.mc-ptable{background:var(--surface);border-radius:var(--r3);overflow:hidden;box-shadow:var(--sh1);border:0}
.mc-pscroll{overflow-x:auto}
.mc-ptable table{width:100%;border-collapse:collapse;min-width:880px}
.mc-ptable th{background:var(--surface2);color:var(--muted);font:600 12px var(--f);text-transform:uppercase;letter-spacing:.05em;padding:16px;text-align:center}
.mc-ptable th:first-child,.mc-ptable td:first-child{text-align:left}
.mc-ptable td{padding:20px 16px;border-top:1px solid var(--line);text-align:center}
.mc-ptable tbody tr:hover{background:var(--surface2)}
.mc-ptable .nm{font:700 20px/1.2 var(--f);letter-spacing:-.025em;color:var(--ink)}
.mc-ptable .ad{font-size:13.5px;color:var(--muted);margin-top:3px}
.mc-ptable .src a{font-size:13.5px;font-weight:500}
.mc-ptable .t{font:600 18px var(--f);letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
.ma-edit{border-collapse:collapse;min-width:1100px;width:100%}
.ma-edit th{font:600 12px var(--f);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:8px}
.ma-edit td{padding:4px}.ma-edit .mc-field{padding:10px 12px;font-size:15px}
/* tasbih */
.mc-tasbih{display:grid;grid-template-columns:5fr 7fr;gap:44px;align-items:center}
.mc-dhikr-list{background:var(--surface);border-radius:var(--r3);box-shadow:var(--sh1);overflow:hidden}
.mc-dhikr,button.mc-dhikr,button.mc-dhikr:hover,button.mc-dhikr:focus{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:16px 22px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;text-align:left;cursor:pointer;color:var(--ink);font:400 16px var(--f);width:100%;box-shadow:none}
.mc-dhikr:last-child{border-bottom:0}
.mc-dhikr .ar{font:400 28px/1.4 Amiri,serif;color:var(--ink);display:block}
.mc-dhikr .en{font-size:14px;color:var(--muted)}
.mc-dhikr .tg{font:600 13px var(--f);color:var(--gold)}
.mc-dhikr[aria-pressed=true]{background:var(--seg)}
.mc-counter{text-align:center}
.mc-ring{position:relative;width:min(340px,80vw);aspect-ratio:1;margin:0 auto 26px}
.mc-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.mc-ring .trk{fill:none;stroke:var(--seg);stroke-width:7}
.mc-ring .bar{fill:none;stroke:url(#mcg);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .2s}
.mc-ring .num{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.mc-ring .num b{font:700 92px/1 var(--f);letter-spacing:-.05em;color:var(--ink)}
.mc-ring .num span{font-size:14px;color:var(--muted)}
.mc-tap,button.mc-tap,button.mc-tap:hover{width:min(340px,80vw);padding:22px;border-radius:var(--pill);background:var(--g-em);color:#F6F3EA;border:0;font:600 18px var(--f);letter-spacing:-.01em;cursor:pointer;box-shadow:0 16px 34px rgba(2,51,37,.3)}
.mc-tap:active{transform:scale(.97)}
.mc-ar-big{font:400 46px/1.5 Amiri,serif;color:var(--ink);margin-bottom:6px}
.mc-ctl{display:flex;gap:14px;justify-content:center;margin-top:18px;flex-wrap:wrap;align-items:center}
.mc-ctl label{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--muted)}
/* account */
.ma-acchead{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.ma-acchead h2{font-size:clamp(34px,4.4vw,52px);letter-spacing:-.04em}
.ma-chart{display:grid;grid-template-columns:repeat(14,1fr);gap:6px;align-items:end;height:130px}
.ma-bar{display:grid;grid-template-rows:1fr auto;height:100%;text-align:center}
.ma-bar i{align-self:end;display:block;min-height:4px;background:var(--g-gold);border-radius:6px}
.ma-bar span{font-size:11px;color:var(--muted);margin-top:4px}
/* quran reader */
.ma-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ma-toolbar2{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.ma-reader{--qs:1;background:var(--surface);border-radius:var(--r4);padding:36px clamp(18px,5vw,64px);box-shadow:var(--sh1);margin-top:14px}
.ma-surah{display:grid;justify-items:center;gap:2px;margin:6px 0 24px;padding:18px;border-radius:var(--r3);background:var(--g-em)}
.ma-surah b{font:400 calc(36px*var(--qs))/1.5 Amiri,serif;color:var(--gl)}
.ma-surah span{font:600 12px var(--f);letter-spacing:.06em;text-transform:uppercase;color:#BFD3C8}
.ma-ayah{padding:6px 0 18px;border-bottom:1px solid var(--line);margin-bottom:12px}
.ma-ayah .ar{font:400 calc(34px*var(--qs))/2.1 Amiri,serif;color:var(--ink);margin:0;text-align:right}
.ma-ayah .num{font-size:.7em;color:var(--gold)}
.ma-ayah .tr{margin:6px 0 0;color:var(--muted);font-size:calc(16px*var(--qs))}
.ma-reader.notr .tr{display:none}
/* give embed */
.give-embed-form-wrapper{max-width:100%}
html[data-theme="dark"] .give-embed-form-wrapper,html[data-theme="dark"] .mc-wrap.mc-section iframe{background:#fff;border-radius:var(--r3)}

/* ---------- responsive ---------- */
@media(max-width:1000px){.wgrid{grid-template-columns:repeat(2,1fr)}.wg-m,.wg-l{grid-column:span 2}.wg-l{grid-row:auto}.tiles{grid-template-columns:1fr}.pillars{grid-template-columns:1fr}.mc-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.ma-two,.mc-two,.mc-tasbih{grid-template-columns:1fr}.mc-tasbih{gap:32px}.ma-tiles{grid-template-columns:repeat(3,1fr)}.ma-count{text-align:left}.mc-section{padding:64px 0}.ap-sec{padding:64px 0}.ap-dark{padding:72px 0}}
@media(max-width:560px){.mc-fields{grid-template-columns:1fr}.ma-tiles{grid-template-columns:repeat(2,1fr)}.ma-event{grid-template-columns:56px 1fr;padding:16px}.ma-date{width:56px}.ma-reader{padding:22px 16px}#mccm-app{padding:16px 0 64px}.stage{border-radius:30px}.wg{min-height:150px}.tile{padding:28px;min-height:360px}.mc-hero{padding:56px 0 20px}.ap-hero{padding:48px 0 24px}.mc-stats{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;animation:none!important}}

/* beat theme resets */
body h1,body h2,body h3,body h4{font-family:var(--f);color:var(--ink);font-weight:700}
body .mc-dark h1,body .mc-dark h2,body .mc-dark h3,body .ap-dark h2,body .ap-dark h3,body .tile-dark h3,body .wg-em,body .ma-today .ma-date-big{color:#F6F3EA}
body .tile-gold h3,body .ap-cta-band h2{color:#0B2A20}
body .pillar h3{color:#F6F3EA}
body .ap-h1{font-weight:700}

/* logo size */
#site-header .header-inner{height:70px}
#site-header .site-logo img,#site-header .custom-logo{height:58px}
html[data-theme="dark"] #site-header .site-logo img,html[data-theme="dark"] #site-header .custom-logo{height:54px}
@media(max-width:767px){#site-header .header-inner{height:60px}#site-header .site-logo img,#site-header .custom-logo{height:48px}html[data-theme="dark"] #site-header .custom-logo{height:46px}}

/* zakat */
.zk-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;align-items:start}
.zk-form{display:grid;gap:22px}
.zk-grp h2{font-size:22px;margin:0 0 12px}
.zk-list{background:var(--surface);border-radius:var(--r3);box-shadow:var(--sh1);overflow:hidden}
.zk-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line);cursor:text;margin:0}
.zk-row:last-child{border-bottom:0}
.zk-row>span{flex:1;font-size:16px;line-height:1.3}
.zk-in{width:140px;text-align:right;border:0;background:transparent;font:600 18px var(--f);letter-spacing:-.02em;color:var(--ink);padding:6px 0;outline:0;border-radius:8px}
.zk-in::placeholder{color:var(--muted);opacity:.6}
.zk-in:focus{background:var(--seg);padding-right:8px}
.zk-hawl{padding:6px 4px}
.zk-result{position:sticky;top:90px;display:grid;gap:14px}
.zk-card{background:var(--g-em);color:#F2EEDF;border-radius:var(--r4);padding:30px;box-shadow:var(--sh2)}
.zk-card .mc-label{color:var(--gl)}
.zk-big{font:700 clamp(44px,6vw,68px)/1.05 var(--f);letter-spacing:-.05em;color:#F6F3EA;margin:8px 0 6px;font-variant-numeric:tabular-nums}
.zk-sub{margin:0 0 20px;color:#BFD3C8;font-size:15px}
.zk-lines{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.16)}
.zk-line{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:15px;color:#D5E3DA}
.zk-line b{font-weight:600;color:#F6F3EA;font-variant-numeric:tabular-nums}
.zk-line.bold{color:#F6F3EA;font-weight:600}
.zk-note{background:var(--surface);border-radius:var(--r3);padding:20px 22px;box-shadow:var(--sh1)}
.zk-note p{margin:6px 0 0;font-size:14px;color:var(--muted)}
@media(max-width:900px){.zk-grid{grid-template-columns:1fr}.zk-result{position:static}}

/* zakat input reset (beats theme input styles) */
.zk-row input.zk-in[type=text]{width:130px;flex:none;border:0;background:transparent;box-shadow:none;border-radius:8px;text-align:right;font:600 18px var(--f);color:var(--ink);padding:6px 0;margin:0}
.zk-row input.zk-in[type=text]:focus{background:var(--seg);padding-right:8px;outline:0}
.zk-row>span{flex:1 1 auto;min-width:0}

.zk-donate{width:100%;justify-content:center}

/* zakat input affordance */
.zk-box{display:flex;align-items:center;gap:4px;flex:none;width:150px;padding:0 14px;background:var(--bg2);border:1.5px solid var(--line);border-radius:12px;transition:border-color .2s,box-shadow .2s,background .2s}
.zk-box:hover{border-color:rgba(15,90,67,.45)}
.zk-box:focus-within{background:var(--surface);border-color:var(--em2);box-shadow:0 0 0 4px rgba(15,90,67,.18)}
.zk-box[data-u="$"]:before{content:"$";color:var(--muted);font:500 17px var(--f)}
.zk-box[data-u="g"]:after{content:"g";color:var(--muted);font:500 15px var(--f);order:2}
.zk-box input.zk-in[type=text],.zk-row .zk-box input.zk-in[type=text]{width:100%;min-width:0;flex:1;padding:12px 0;text-align:right;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0}
.zk-row .zk-box input.zk-in[type=text]:focus{background:transparent!important;padding-right:0}
.zk-in::placeholder{color:var(--muted);opacity:.55}

/* masjid cards */
.mq-list{display:grid;gap:18px}
.mq-card{background:var(--surface);border-radius:var(--r3);padding:24px 26px;box-shadow:0 2px 4px rgba(2,51,37,.06),0 16px 38px rgba(2,51,37,.13);transition:transform .25s,box-shadow .25s}
.mq-card:hover{transform:translateY(-3px);box-shadow:0 4px 8px rgba(2,51,37,.08),0 24px 48px rgba(2,51,37,.18)}
.mq-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.mq-head h3{font-size:24px;letter-spacing:-.03em;margin:0 0 2px}
.mq-ad{font-size:14px;color:var(--muted)}
.mq-src{font:500 14px var(--f);color:var(--em2);border:1px solid var(--line);border-radius:var(--pill);padding:7px 14px;white-space:nowrap}
.mq-src:hover{background:var(--seg)}
.mq-times{display:grid;grid-template-columns:repeat(5,1fr) 1.5fr;gap:10px}
.mq-t{background:var(--surface2);border-radius:16px;padding:14px 10px;text-align:center;display:grid;gap:4px;box-shadow:inset 0 0 0 1px var(--line)}
.mq-t span{font:600 11.5px var(--f);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.mq-t b{font:600 19px/1.2 var(--f);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.mq-t.wide b{font-size:16px}
@media(max-width:900px){.mq-times{grid-template-columns:repeat(3,1fr)}.mq-t.wide{grid-column:span 3}}
@media(max-width:480px){.mq-times{grid-template-columns:repeat(2,1fr)}.mq-t.wide{grid-column:span 2}.mq-card{padding:20px 18px}}

/* contact mobile fix */
.mc-form-panel{box-sizing:border-box}
@media(max-width:800px){.mc-form-panel{width:calc(100% - 32px)!important;max-width:calc(100% - 32px)!important;margin:0 16px 56px!important;padding:24px 20px!important;border-radius:var(--r3)!important}.mc-form-panel .mc-fields{grid-template-columns:1fr}}
body{overflow-x:clip}

/* field reset (beats theme input styles) */
input.mc-field,textarea.mc-field,select.mc-field,input.mc-field[type=text],input.mc-field[type=email],input.mc-field[type=password],input.mc-field[type=number],input.mc-field[type=url],input.mc-field[type=date],input.mc-field[type=datetime-local]{border:1.5px solid rgba(11,42,32,.16);border-radius:12px;background-color:var(--surface);color:var(--ink);padding:14px 16px;font:400 17px/1.3 var(--f);box-shadow:none;width:100%;box-sizing:border-box}
input.mc-field:focus,textarea.mc-field:focus,select.mc-field:focus{border-color:var(--em2);box-shadow:0 0 0 4px rgba(15,90,67,.18);outline:0}
html[data-theme="dark"] input.mc-field,html[data-theme="dark"] textarea.mc-field,html[data-theme="dark"] select.mc-field{border-color:rgba(242,238,224,.2);background-color:#0B1A13}
textarea.mc-field{min-height:150px;resize:vertical}

/* mobile app tab bar */
.tb-bar,.tb-back,.tb-sheet{display:none}
@media(max-width:767px){
body.has-tb{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.has-tb .mc-fab{display:none}
.tb-bar{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;position:fixed;left:0;right:0;bottom:0;z-index:110;background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(26px);backdrop-filter:saturate(180%) blur(26px);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.tb-bar .tb-i,.tb-bar button.tb-i,.tb-bar button.tb-i:hover,.tb-bar button.tb-i:focus{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 4px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--muted);font:500 10.5px/1.1 var(--f);letter-spacing:0;text-decoration:none;cursor:pointer;min-width:0}
.tb-i svg{width:26px;height:26px}
.tb-i.on{color:var(--em2)}
html[data-theme="dark"] .tb-i.on{color:var(--gl)}
.tb-i.tb-don{margin-top:-24px;color:var(--ink)}
.tb-c{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--g-gold);color:#0B2A20;border:4px solid var(--bg);box-shadow:0 10px 24px rgba(185,138,46,.45);transition:transform .2s}
.tb-c svg{width:26px;height:26px}
.tb-don:active .tb-c{transform:scale(.94)}
.tb-back{display:block;position:fixed;inset:0;background:rgba(2,18,12,.45);opacity:0;pointer-events:none;transition:opacity .25s;z-index:120}
.tb-back.open{opacity:1;pointer-events:auto}
.tb-sheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:130;background:var(--surface);border-radius:28px 28px 0 0;padding:10px 18px calc(30px + env(safe-area-inset-bottom));box-shadow:0 -20px 60px rgba(0,0,0,.25);transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.tb-sheet.open{transform:none}
.tb-grab{width:40px;height:5px;border-radius:99px;background:var(--seg);margin:0 auto 18px}
.tb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tb-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 6px;border-radius:20px;background:var(--surface2);color:var(--ink);text-decoration:none;font:500 13px var(--f);box-shadow:inset 0 0 0 1px var(--line)}
.tb-tile.on{box-shadow:inset 0 0 0 2px var(--em2)}
.tb-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--g-em);color:var(--gl)}
.tb-ico svg{width:24px;height:24px}
}

/* tab bar: header cleanup + fit */
@media(max-width:767px){
body.has-tb #site-header .site-navigation-toggle-holder,body.has-tb #site-header .site-navigation-dropdown,body.has-tb #site-header .site-navigation{display:none!important}
body.has-tb #site-header .header-inner{padding:0 16px}
body.has-tb #site-header .site-branding{margin-right:auto}
.tb-bar{padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right));-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.tb-bar .tb-i{-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:52px;justify-content:flex-start;overflow:hidden}
.tb-bar .tb-i span:last-child{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:clip}
.tb-bar .tb-i:active{opacity:.6}
.tb-sheet{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right));max-height:80vh;overflow:auto}
}
@media(max-width:360px){.tb-bar .tb-i{font-size:10px}.tb-i svg{width:24px;height:24px}.tb-c{width:54px;height:54px}.tb-grid{gap:8px}.tb-tile{padding:14px 4px;font-size:12px}}
@media(display-mode:standalone){#site-header{padding-top:env(safe-area-inset-top)}}

/* grid min-width fix */
.ma-two>*,.mc-two>*,.mc-tasbih>*,.zk-grid>*,.mc-stats>*,.wgrid>*,.tiles>*,.pillars>*{min-width:0}
@media(max-width:900px){.ma-two,.mc-two,.mc-tasbih,.zk-grid{grid-template-columns:minmax(0,1fr)}.mc-dhikr .en{overflow-wrap:anywhere}}
.mc-wrap,.mc-narrow{box-sizing:border-box;width:100%}

/* motion */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.22s ease both vtOut}::view-transition-new(root){animation:.34s cubic-bezier(.2,.7,.2,1) both vtIn}
@keyframes vtOut{to{opacity:0}}@keyframes vtIn{from{opacity:0;transform:translateY(8px)}}
@keyframes upIn{from{opacity:0;transform:translateY(26px)}}
@keyframes pop{from{opacity:0;transform:translateY(30px) scale(.9)}}
@keyframes floaty{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(40px,30px,0) scale(1.15)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes beat{0%,55%,100%{transform:scale(1)}65%{transform:scale(1.2)}75%{transform:scale(1)}85%{transform:scale(1.13)}}
@keyframes sheen{0%,70%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(260%) skewX(-18deg)}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes ripple{from{transform:scale(0);opacity:.45}to{transform:scale(4);opacity:0}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(217,183,106,.55)}80%,100%{box-shadow:0 0 0 14px rgba(217,183,106,0)}}
@keyframes glowPulse{0%,100%{opacity:.55}50%{opacity:1}}
/* hero entrance (visible by default; animation only adds the from-state) */
.ap-kicker{animation:upIn .8s cubic-bezier(.2,.7,.2,1) .05s both}
.ap-h1{animation:upIn .95s cubic-bezier(.2,.7,.2,1) .15s both}
.ap-sub{animation:upIn .95s cubic-bezier(.2,.7,.2,1) .3s both}
.ap-cta{animation:upIn .95s cubic-bezier(.2,.7,.2,1) .45s both}
.mc-hero h1{animation:upIn .9s cubic-bezier(.2,.7,.2,1) .05s both}
.mc-hero .mc-lead{animation:upIn .9s cubic-bezier(.2,.7,.2,1) .2s both}
.mc-khatma-hdr{animation:upIn .8s ease both}
/* widgets spring in one by one */
.mc-js .stage.mc-in .wg{animation:pop .75s cubic-bezier(.34,1.45,.64,1) backwards}
.wgrid .wg:nth-child(1){animation-delay:.05s!important}.wgrid .wg:nth-child(2){animation-delay:.13s!important}.wgrid .wg:nth-child(3){animation-delay:.21s!important}.wgrid .wg:nth-child(4){animation-delay:.29s!important}.wgrid .wg:nth-child(5){animation-delay:.37s!important}.wgrid .wg:nth-child(6){animation-delay:.45s!important}.wgrid .wg:nth-child(7){animation-delay:.53s!important}
.wg{z-index:1;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;will-change:transform}
.wg:hover{transform:perspective(900px) translateY(-4px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.wgrid{transform:scale(var(--s,1));transform-origin:50% 0;transition:transform .12s linear}
.stage:before,.stage:after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(8px)}
.stage:before{width:420px;height:420px;left:-120px;top:-140px;background:radial-gradient(circle,rgba(217,183,106,.34),transparent 65%);animation:floaty 16s ease-in-out infinite alternate}
.stage:after{width:520px;height:520px;right:-160px;bottom:-200px;background:radial-gradient(circle,rgba(120,210,160,.30),transparent 65%);animation:floaty 20s ease-in-out infinite alternate-reverse}
.wg-em .wg-ic{animation:ping 2.6s ease-out infinite}
.wg-ring .b{filter:drop-shadow(0 0 6px rgba(217,183,106,.35))}
/* tiles */
.tile{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
.tile:hover{transform:perspective(1000px) translateY(-5px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.tile .art{animation:spinSlow 120s linear infinite;transform-origin:50% 50%}
.tile .art.ar{animation:none}
.pillar .ic{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}.pillar:hover .ic{transform:rotate(-8deg) scale(1.12)}
/* gold buttons: periodic sheen */
.mc-btn.gold,.tb-c,#site-header .site-navigation li.mc-cta>a{position:relative;overflow:hidden}.mc-fab{overflow:hidden}
.mc-btn.gold:after,.mc-fab:after,#site-header .site-navigation li.mc-cta>a:after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-130%) skewX(-18deg);animation:sheen 5.5s ease-in-out 1.2s infinite;pointer-events:none}
.wg-heart svg,.tb-c svg,.mc-fab svg{animation:beat 2.6s ease-in-out infinite;transform-origin:50% 55%}
/* tasbih feedback */
#mcCount.bump,.wg-big.bump{animation:bump .28s ease}
.mc-tap{position:relative;overflow:hidden}
.mc-tap .rp{position:absolute;border-radius:50%;width:90px;height:90px;margin:-45px 0 0 -45px;background:rgba(255,255,255,.55);pointer-events:none;animation:ripple .6s ease-out forwards}
.mc-ring .bar{filter:drop-shadow(0 0 8px rgba(217,183,106,.35))}
/* prayer: next tile breathes */
.ma-tile.next{animation:glowPulse 3.2s ease-in-out infinite}
/* cards slide up as they come in (scroll-driven where supported) */
.mq-card,.ma-event,.ma-news,.mc-stat,.zk-card,.zk-list,.ma-li,.mc-faq details{animation:upIn .6s cubic-bezier(.2,.7,.2,1) both}
@supports(animation-timeline:view()){.mq-card,.ma-event,.ma-news,.mc-stat,.zk-card,.zk-list,.ma-li,.ap-cta-band,.pillar,.tile,.mc-panel{animation:upIn linear both;animation-timeline:view();animation-range:entry 0% entry 38%}}
/* link underline grow */
.ma-more:after,.mc-link:after{transition:transform .2s}
@media(prefers-reduced-motion:reduce){.stage:before,.stage:after,.tile .art,.wg-heart svg,.tb-c svg,.mc-fab svg,.wg-em .wg-ic,.ma-tile.next,.mc-btn.gold:after,.mc-fab:after{animation:none!important}@view-transition{navigation:none}}