/* ============================================================================
   Masjid 24/7 install site: shared by / and /beta/. Mobile-first.

   Rebranded 2026-10-01 onto the MVP PRO design system (light, corporate, one
   brand blue, borders and rules instead of glow and gradient). Before that it
   followed the app's dark theme; the app itself is unchanged.

   Still built by hand: no CSS framework, no CDN, no web-font service.
   Everything this page needs is served from this site, so it loads quickly on
   mobile data. Type is IBM Plex if the device has it, otherwise the system font.
   All colour lives in :root. Class names are the ones the two pages already use.
   ============================================================================ */

:root{
  color-scheme:light;
  /* ---- MVP PRO tokens ---- */
  --c-ink:#0F1A2A;
  --c-ink-2:#3A475C;
  --c-muted:#5E6B80;
  --c-line:#DCE1E8;
  --c-line-strong:#C3CAD5;
  --c-surface:#FFFFFF;
  --c-surface-2:#F4F6F9;
  --c-brand:#0A4DA2;
  --c-brand-strong:#083C7E;
  --c-brand-soft:#E7EFFA;
  --c-on-brand:#FFFFFF;
  --c-warning:#9A5B00;
  --c-warning-soft:#FDF3E1;
  --c-bezel:#111114;                    /* the watch bezel drawn round each face preview */

  /* ---- the names the rules below were written with ---- */
  --bg:var(--c-surface);
  --raised:var(--c-surface-2);
  --card:var(--c-surface);
  --card-hi:var(--c-surface-2);
  --line:var(--c-line);
  --line-strong:var(--c-line-strong);
  --text:var(--c-ink);                  /* 16.7:1 on --bg */
  --muted:var(--c-ink-2);               /* 9.6:1 */
  --faint:var(--c-muted);               /* 5.5:1 */
  --accent:var(--c-brand);
  --accent-text:var(--c-brand);         /* 8.3:1 on --bg */
  --accent-soft:var(--c-brand-soft);
  --accent-line:#B8CCE8;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:6px;
  --radius-sm:4px;
  --pad:20px;
  --header-h:60px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + env(safe-area-inset-top) + 12px) }
body{ margin:0; min-height:100vh; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  position:relative }
img{ max-width:100%; height:auto }
a{ color:var(--accent-text); text-underline-offset:.2em }
a:hover{ color:var(--c-brand-strong) }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
h1,h2,h3,h4{ margin:0 }

.ic{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round }

.skip{ position:absolute; left:-9999px; top:8px; z-index:60 }
.skip:focus{ left:12px; background:var(--c-ink); color:var(--c-on-brand); padding:10px 14px; border-radius:var(--radius-sm) }

.wrap{ position:relative; width:100%; max-width:1080px; margin:0 auto;
  padding-left:max(var(--pad), env(safe-area-inset-left));
  padding-right:max(var(--pad), env(safe-area-inset-right)) }
.narrow{ max-width:760px }

/* ---- header ---------------------------------------------------------------- */
.site-header{ position:sticky; top:0; z-index:40; padding-top:env(safe-area-inset-top);
  background:var(--c-surface); border-bottom:1px solid var(--line) }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:var(--header-h) }
.brand{ display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--text); text-decoration:none }
.brand img{ display:block; width:32px; height:32px }
.brand-text{ display:flex; flex-direction:column; line-height:1.15 }
.brand-name{ font-size:.9375rem; font-weight:700; letter-spacing:.02em }
.brand-product{ font-size:.75rem; font-weight:500; color:var(--faint) }
.pill{ display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 16px; border-radius:var(--radius-sm);
  background:var(--c-surface); border:1px solid var(--line-strong); color:var(--text);
  font-weight:600; font-size:.9375rem; text-decoration:none; white-space:nowrap }
.pill .ic{ width:17px; height:17px }
.pill:hover{ border-color:var(--c-ink); color:var(--text) }

/* ---- type ------------------------------------------------------------------ */
.eyebrow{ margin:0 0 12px; font-family:var(--mono); font-size:.8125rem; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint) }
.eyebrow.muted{ color:var(--faint) }
.display{ font-weight:600; font-size:clamp(2rem, 1.45rem + 2.8vw, 3.25rem);
  line-height:1.1; letter-spacing:-.02em; max-width:18ch; text-wrap:balance }
.h2{ font-weight:600; font-size:clamp(1.5rem, 1.25rem + 1.4vw, 2rem);
  line-height:1.15; letter-spacing:-.01em; text-wrap:balance }
.lede{ margin:14px 0 0; max-width:34em; color:var(--muted); font-size:clamp(1.0625rem, 1rem + .3vw, 1.25rem); text-wrap:pretty }
.meta{ margin:0; color:var(--faint); font-family:var(--mono); font-size:.8125rem }
.note{ margin:18px 0 0; color:var(--faint); font-size:.9375rem }

main > section{ padding-block:clamp(32px, 5vw, 56px) }
main > section + section{ border-top:1px solid var(--line) }

/* ---- buttons --------------------------------------------------------------- */
.btn-primary{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:12px 22px;
  border-radius:var(--radius-sm); background:var(--c-brand); color:var(--c-on-brand); font-weight:600; font-size:1.0625rem;
  text-decoration:none; transition:background-color .12s ease }
.btn-primary:hover{ background:var(--c-brand-strong); color:var(--c-on-brand) }
.btn-outline{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:10px 22px;
  border-radius:var(--radius-sm); border:1px solid var(--line-strong); background:var(--c-surface); color:var(--text);
  font-weight:600; font-size:1rem; text-decoration:none; transition:border-color .12s ease }
.btn-outline:hover{ border-color:var(--c-ink); color:var(--text) }
.btn-small{ display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:8px 12px;
  border-radius:var(--radius-sm); border:1px solid var(--line-strong); background:var(--c-surface); color:var(--text);
  font-weight:600; font-size:.9375rem; text-decoration:none }
.btn-small small{ color:var(--faint); font-weight:500; font-size:inherit }
.btn-small:hover{ border-color:var(--c-ink); color:var(--text) }
.textlink{ display:inline-flex; align-items:center; gap:6px; min-height:44px;
  color:var(--accent-text); font-weight:600; font-size:.9375rem; text-decoration:none }
.textlink .ic{ width:17px; height:17px }
.textlink:hover{ text-decoration:underline }

/* ---- hero: copy left, facts right ------------------------------------------- */
.hero{ display:grid; gap:32px; align-items:start; padding-top:clamp(28px, 6vw, 64px) }
.cta{ display:grid; gap:12px; justify-items:stretch; margin-top:28px; max-width:430px }
.cta .textlink{ justify-self:start }
@media (min-width:880px){
  .hero{ grid-template-columns:7fr 5fr; gap:48px }
}
.fact-panel{ margin:0; border:1px solid var(--line); border-radius:var(--radius); background:var(--c-surface) }
.fact-panel div{ display:flex; justify-content:space-between; gap:16px; padding:12px 16px; border-top:1px solid var(--line); font-size:.9375rem }
.fact-panel div:first-child{ border-top:0 }
.fact-panel dt{ color:var(--faint); flex:0 0 auto }
.fact-panel dd{ margin:0; font-weight:600; text-align:right }

/* ---- features: a bordered list (name, then detail), not icon cards ---------- */
.features{ list-style:none; margin:18px 0 0; padding:0; border-top:1px solid var(--line) }
.feature{ display:grid; grid-template-columns:1fr; gap:2px; padding:16px 0; border-bottom:1px solid var(--line) }
.chip{ display:none }                    /* the per-feature icons are retired */
.feature h3{ font-size:1.0625rem; font-weight:600; line-height:1.3 }
.feature p{ margin:0; color:var(--muted); font-size:.9375rem; line-height:1.5 }
@media (min-width:720px){ .feature{ grid-template-columns:1fr 2fr; gap:24px; align-items:baseline } }

/* ---- cards and numbered steps --------------------------------------------- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px }
.card > p{ margin:10px 0 0; color:var(--muted) }
.card .btn-primary, .card .btn-outline{ margin-top:18px }
.card .meta{ margin-top:10px }
.card-title{ display:flex; align-items:center; gap:10px; font-size:1.25rem; font-weight:600; line-height:1.3 }
.card-title .ic{ width:22px; height:22px; color:var(--faint) }
.card-title .opt{ color:var(--faint); font-weight:500; font-size:.9375rem }
.num{ flex:none; font-family:var(--mono); font-weight:500; font-size:.8125rem; color:var(--faint) }
.num::before{ content:"0" }
.stack{ display:grid; gap:16px }

.steps{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:14px; counter-reset:step }
.steps li{ counter-increment:step; display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; align-items:baseline;
  color:var(--muted); font-size:1rem; line-height:1.55 }
.steps li::before{ content:counter(step, decimal-leading-zero); font-family:var(--mono); font-size:.8125rem; color:var(--faint) }
.steps b{ color:var(--text); font-weight:600 }

code{ font-family:var(--mono); font-size:.875em; color:var(--text);
  background:var(--c-surface-2); border:1px solid var(--line); padding:2px 6px; border-radius:var(--radius-sm); overflow-wrap:anywhere }

.tip{ margin:18px 0 0; padding:12px 16px; border:1px solid var(--line); border-left:3px solid var(--c-warning);
  background:var(--c-warning-soft); border-radius:var(--radius-sm); color:var(--text); font-size:.9375rem; line-height:1.55 }
.tip b{ color:var(--text) }

/* ---- watch ----------------------------------------------------------------- */
.watch-head{ display:grid; gap:22px }
.watch-cta{ display:grid; gap:10px }
@media (min-width:880px){
  .watch-head{ grid-template-columns:minmax(0,1fr) 340px; align-items:end }
}
.faces-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:40px }
.faces-head h3{ font-size:1.0625rem; font-weight:600 }
.swipe-hint{ color:var(--faint); font-size:.8125rem; white-space:nowrap }

/* On a phone: a swipe row of big previews, the next card peeking in to invite a
   swipe. From 720px a two-up grid, and four-up only from 1000px: four-up on a
   768px tablet shrank each preview to about 107px, too small to choose a face by. */
.faces{ list-style:none; display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad); scrollbar-width:none;
  margin:14px calc(-1 * var(--pad)) 0; padding:6px var(--pad) 12px }
.faces::-webkit-scrollbar{ display:none }
.face{ flex:0 0 min(64vw, 240px); scroll-snap-align:start; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 16px 16px }
/* The previews are real renders of each face; the dark ring is the watch bezel. */
.face img{ display:block; width:80%; max-width:200px; aspect-ratio:1; margin:2px auto 18px; border-radius:50%; background:#000;
  box-shadow:0 0 0 5px var(--c-bezel) }
.face h4{ font-size:1.0625rem; font-weight:600 }
.face p{ flex:1; margin:4px 0 0; color:var(--muted); font-size:.9375rem; line-height:1.45 }
.face .btn-small{ margin-top:14px }
@media (min-width:720px){
  .faces{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; overflow:visible; margin:16px 0 0; padding:0 }
  .face{ flex:none }
  .swipe-hint{ display:none }
}
@media (min-width:1000px){
  .faces{ grid-template-columns:repeat(4,minmax(0,1fr)) }
}

/* ---- accordions ------------------------------------------------------------ */
.faq{ margin-top:16px; border-top:1px solid var(--line) }
.acc{ border-bottom:1px solid var(--line) }
.acc summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px;
  min-height:56px; padding:14px 0; font-weight:600; font-size:1.0625rem; line-height:1.35 }
.acc summary::-webkit-details-marker{ display:none }
.acc summary .ic{ width:18px; height:18px; color:var(--faint); transition:transform .15s ease }
.acc[open] summary .ic{ transform:rotate(180deg) }
.acc-body{ padding:0 0 18px; color:var(--muted); font-size:1rem; line-height:1.6; max-width:68ch }
.acc-body p{ margin:10px 0 0 }
.acc-body p:first-child{ margin-top:0 }
.acc-body ol{ margin:0; padding-left:20px }
.acc-body li + li{ margin-top:8px }
.acc-body b{ color:var(--text); font-weight:600 }
#watch .acc{ margin-top:12px; border-top:1px solid var(--line) }

/* ---- beta ------------------------------------------------------------------ */
.badge{ display:inline-block; padding:2px 8px; border-radius:var(--radius-sm); background:var(--c-brand-soft);
  border:1px solid transparent; color:var(--c-brand); letter-spacing:.05em }
.face-links{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px }

/* ---- footer ---------------------------------------------------------------- */
.site-footer{ border-top:1px solid var(--line); margin-top:clamp(20px, 4vw, 40px); background:var(--c-surface-2);
  padding:28px 0 calc(28px + env(safe-area-inset-bottom)); color:var(--faint); font-size:.9375rem }
.site-footer img{ display:block; width:28px; height:28px; margin:0 0 10px }
.site-footer p{ margin:4px 0 0 }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ transition:none !important; animation:none !important }
}