/* SORASAF site. A dark, cinematic page: the mosque at dusk with the day's prayers drawn as the sun's path
   across its sky, three phones beneath it, glass with lit edges, a rose-to-amber accent taken from that
   sky, fine film grain, and one modern typeface set large and light. It does not copy the app's look.
   No script. Motion is CSS only: one opening sequence in the hero, the frieze, and a soft reveal on scroll. */
:root {
  --bg: #0D0A10; --bg-2: #15101A; --bg-3: #1D1622;
  --text: #F7F2F4; --muted: #A99DA6; --faint: #6E6370;
  --line: rgba(255, 255, 255, 0.09); --line-2: rgba(255, 255, 255, 0.16);
  --glass: rgba(255, 255, 255, 0.045); --glass-2: rgba(255, 255, 255, 0.08);
  --rose: #F08BAA; --rose-pale: #FFD7E4; --amber: #F6B26B; --maroon: #9E1B4E; --deep: #7A1240;
  --grad-text: linear-gradient(92deg, #FFD7E4 0%, #F6B26B 100%);
  /* the headline fill: white at the top, warming to blush at the foot, across the whole line */
  --grad-title: linear-gradient(180deg, #FFFFFF 0%, #FCF2F5 45%, #EDC6D2 100%);
  --sheen: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  --head: 92px;
  --sec-pad: 128px;   /* the room above and below each section; the Download link uses it to land on the panel */
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --arabic: 'UthmanicHafs', 'Amiri Quran', 'Scheherazade New', serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
/* the King Fahd Complex mushaf face (the app's own file), for the Quran text on the doa phone */
@font-face { font-family: 'UthmanicHafs'; src: url(/assets/fonts/UthmanicHafs1Ver18.ttf) format('truetype'); font-display: swap; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.65; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
/* a fine film grain over everything, so the dark reads as a surface and not as an empty screen */
body::after { content: ''; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.055; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
img { display: block; max-width: 100%; -webkit-user-drag: none; -webkit-touch-callout: none; }
a { color: var(--rose-pale); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
::selection { background: var(--rose); color: var(--bg); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 8px; }
h1, h2, h3 { margin: 0 0 16px; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(46px, 6.2vw, 94px); line-height: 0.96; letter-spacing: -0.05em; }
h2 { font-size: clamp(36px, 5vw, 72px); line-height: 1; letter-spacing: -0.045em; }
h3 { font-size: 21px; line-height: 1.25; letter-spacing: -0.02em; }
p { margin: 0 0 14px; }
.wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.lead { font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 52ch; text-wrap: pretty; }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }
.accent { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.link { font-weight: 600; }
.link.arrow::after { content: ' →'; transition: transform 0.2s var(--ease); display: inline-block; }
.link.arrow:hover::after { transform: translateX(3px); }
.link.back::before { content: '← '; }
.after-grid { margin-top: 32px; }
.centre { text-align: center; }

/* a lit edge for glass: light catches the top left and the bottom right of the rim */
.tile::after, .cta::after, .top-row::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06) 28%, rgba(255, 255, 255, 0) 55%, rgba(246, 178, 107, 0.22) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

/* the ringed mark, the one thing kept from the brand */
.mark { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--maroon); border: 2px solid #fff; flex: none; }
.mark img { width: 62%; height: 62%; }
.mark.sm { width: 26px; height: 26px; border-width: 1.5px; }
.mark.lg { display: grid; width: 92px; height: 92px; border-width: 3px; box-shadow: 0 0 0 14px rgba(240, 139, 170, 0.07), 0 0 0 15px rgba(255, 255, 255, 0.07), 0 0 0 34px rgba(240, 139, 170, 0.035), 0 30px 70px rgba(0, 0, 0, 0.6); margin: 0 auto 48px; }

/* header: a floating glass capsule over the page */
.top { position: sticky; top: 0; z-index: 20; padding: 14px 0; pointer-events: none; }
.top-row { position: relative; pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 10px 0 14px; border-radius: 999px; background: rgba(22, 16, 26, 0.55); backdrop-filter: saturate(160%) blur(22px); -webkit-backdrop-filter: saturate(160%) blur(22px); box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.55); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); }
.brand:hover { text-decoration: none; }
.wordmark { font-weight: 700; letter-spacing: 0.26em; font-size: 13px; }
.nav { display: flex; gap: 2px; align-items: center; font-size: 14px; font-weight: 500; }
.nav a { color: var(--muted); padding: 9px 16px; border-radius: 999px; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); text-decoration: none; }
.nav .lang, .menu nav a[hreflang] { color: var(--bg); background: var(--text); border-radius: 999px; padding: 9px 18px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; margin-left: 8px; }
.nav .lang:hover { background: #fff; color: var(--bg); }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 46px; height: 46px; display: grid; place-content: center; gap: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 16px; height: 1.5px; background: var(--text); border-radius: 2px; }
.menu[open] summary { background: rgba(255, 255, 255, 0.14); }
.menu nav { position: absolute; right: -10px; top: 62px; background: rgba(29, 22, 34, 0.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow), var(--sheen); padding: 10px; display: grid; gap: 2px; min-width: 256px; }
.menu nav a { padding: 14px 16px; border-radius: 16px; color: var(--text); font-weight: 500; }
.menu nav a:hover { background: var(--glass-2); text-decoration: none; }
.menu nav a[hreflang] { justify-self: start; margin: 8px 14px 6px; }

/* hero: the photo under the capsule, the words centred under the day's arc, the phones beneath */
/* the banner fills the first screen (up to 980px), the sky photo behind it, the phones in their own section below */
.hero { position: relative; overflow: hidden; isolation: isolate; margin-top: calc(-1 * var(--head)); padding-top: calc(var(--head) + 20px); min-height: min(100vh, 980px); min-height: min(100svh, 980px); text-align: center; }
/* the photo covers the whole banner (one screen) and fades into the page at its foot, so the whole mosque and its sky show */
.hero-bg { position: absolute; inset: 0; z-index: -2; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.hero-bg picture { display: block; height: 100%; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 42%; filter: brightness(0.9) saturate(1.08); transform: scale(1.04); animation: settle 3s var(--ease) both; }
/* the sky of the hour: two photographs of the mosque stacked, the next fading in over the current one as its time comes;
   live.js trades their places when a fade is done, so the one on top is marked by a class, not by its order */
.sky-photo { position: absolute; inset: 0; z-index: 0; }
.sky-photo:not([src]) { visibility: hidden; }
.sky-photo.is-top { z-index: 1; opacity: 0; transition: opacity 1.8s ease; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(56% 34% at 50% 27%, rgba(13, 10, 16, 0.62), rgba(13, 10, 16, 0) 100%), linear-gradient(180deg, rgba(13, 10, 16, 0.5) 0%, rgba(13, 10, 16, 0.18) 24%, rgba(13, 10, 16, 0.32) 46%, rgba(13, 10, 16, 0.78) 70%, rgb(13, 10, 16) 92%); }
/* the phones come up out of the dark at the foot of the hero */
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: 4; pointer-events: none; background: linear-gradient(180deg, rgba(13, 10, 16, 0), rgb(13, 10, 16) 92%); }
.hero-copy { position: relative; z-index: 5; }
.hero-copy > * { animation: rise 1.1s var(--ease-out) both; }
.hero-copy > :nth-child(1) { animation-delay: 0.05s; }
.hero-copy > :nth-child(2) { animation-delay: 0.22s; }
.hero-copy > :nth-child(3) { animation-delay: 0.34s; }
.hero-copy h1 { position: relative; z-index: 1; margin: 0 auto; font-size: clamp(38px, 4.8vw, 72px); padding-bottom: 0.06em; background: var(--grad-title); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.45)); }
.hero-copy h1 .accent { background: none; color: inherit; }
/* inside the arc, at the top of the banner: the live clock, whose prayer time it is now, the next prayer and the
   date (live.js). The arc is fitted round it, the block on its horizon. */
.now { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 auto; }
/* until the script runs the block keeps its room inside the arc, unseen; a line waiting for the times keeps its
   room too, so nothing under it moves when it fills in. In the minutes before Zohor the prayer line goes (is-gap). */
.now[hidden] { display: flex; visibility: hidden; height: 170px; }
.now-prayer[hidden] { display: inline-flex; visibility: hidden; }
.now-prayer.is-gap { display: none; }
.now-next[hidden] { display: block; visibility: hidden; }
.now-hijri[hidden] { display: inline; visibility: hidden; }
.now-clock { margin: 0; font-size: clamp(38px, 4.2vw, 56px); font-weight: 300; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text); text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45); }
.now-s { color: rgba(247, 242, 244, 0.5); }
.now-prayer { display: inline-flex; align-items: center; gap: 10px; margin: 0; min-height: calc(1.65em + 14px); padding: 7px 16px 7px 12px; border-radius: 999px; background: rgba(13, 10, 16, 0.4); box-shadow: inset 0 0 0 1px var(--line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 14.5px; color: rgba(247, 242, 244, 0.7); }
.now-prayer b { font-weight: 600; color: var(--text); }
/* the date in both calendars, Hijrah first, a slim rule between them */
.now-date { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; margin: 2px 0 0; font-size: 14px; color: rgba(247, 242, 244, 0.72); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.now-hijri { min-height: 1.65em; color: var(--rose-pale); font-weight: 500; }
.now-hijri:not([hidden]) + .now-masihi { display: inline-flex; align-items: center; gap: 14px; }
.now-hijri:not([hidden]) + .now-masihi::before { content: ''; width: 1px; height: 14px; background: rgba(247, 242, 244, 0.3); }
/* the amber dot breathes slowly, the one sign that this line is live */
.now-next { min-height: 1.65em; margin: -2px 0 0; font-size: 14.5px; color: rgba(247, 242, 244, 0.72); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.now-next b { font-weight: 600; color: var(--amber); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.now-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(246, 178, 107, 0.18); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 7px rgba(246, 178, 107, 0); } }
/* what is inside, one quiet line joined by the frieze's star */
.inside { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; margin: 24px 0 0; font-size: 14px; font-weight: 500; color: rgba(247, 242, 244, 0.72); }
.inside-star { display: inline-grid; place-items: center; color: var(--amber); opacity: 0.65; }
.inside-star svg { width: 10px; height: 10px; }
/* the live line: whose times these are, where they come from, and the way to make them exact */
/* the place and "Use my location", just under the headline and above the clock. Until the times arrive its room
   is kept but nothing shows (is-waiting), so the clock never moves down when it fills in */
.live { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; margin: -40px auto 16px; }
.live[hidden] { display: none; }
.live.is-waiting { visibility: hidden; min-height: 65px; }
.live-place { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 0; padding: 6px 14px 6px 7px; border-radius: 999px; background: rgba(13, 10, 16, 0.42); box-shadow: inset 0 0 0 1px var(--line-2), var(--sheen); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 13px; color: rgba(247, 242, 244, 0.78); }
.live-place:has(b:empty) { display: none; }
.live-pin { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(246, 178, 107, 0.16); color: var(--amber); flex: none; }
.live-place b { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }
.live-place span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-place span:empty { display: none; }
.live-place span i { font-style: normal; white-space: nowrap; }
.live-locate { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--bg); background: var(--text); border: 0; border-radius: 999px; padding: 9px 15px; cursor: pointer; transition: background 0.2s var(--ease), transform 0.2s var(--ease); }
.live-locate:hover { background: #fff; transform: translateY(-1px); }
.live-locate:disabled { opacity: 0.7; cursor: progress; transform: none; }
.live-locate[hidden] { display: none; }
.live-note { flex-basis: 100%; margin: 1px 0 0; font-size: 11.5px; color: rgba(247, 242, 244, 0.5); }
.live-note:empty { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.12); } to { transform: scale(1.04); } }

/* store buttons: our own, plain, until the listings exist */
.badges { display: flex; flex-wrap: wrap; gap: 12px; }
.badges.centre { justify-content: center; }
.badge { position: relative; display: inline-flex; align-items: center; gap: 12px; background: var(--text); color: var(--bg); border-radius: 999px; padding: 8px 28px 8px 8px; line-height: 1.15; text-align: left; overflow: hidden; transition: transform 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.badge:hover { text-decoration: none; background: #fff; transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.badge.is-soon { background: rgba(255, 255, 255, 0.07); color: var(--text); border: 1px solid var(--line-2); box-shadow: var(--sheen), 0 14px 40px -14px rgba(0, 0, 0, 0.6); cursor: default; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.badge.is-soon:hover { transform: none; background: rgba(255, 255, 255, 0.1); }
.badge-glyph { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(13, 10, 16, 0.08); flex: none; }
.badge.is-soon .badge-glyph { background: linear-gradient(145deg, rgba(246, 178, 107, 0.22), rgba(240, 139, 170, 0.12)); color: var(--amber); }
.badge-text { display: grid; }
.badge-text small { font-size: 11.5px; font-weight: 500; opacity: 0.62; }
.badge-text b { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }

/* the phones' stage, in its own section under the banner: one fixed-size drawing, scaled as a whole to the screen */
.screens { padding-top: 40px; overflow-x: clip; }
.stage { --ps: 1; position: relative; z-index: 3; height: calc(660px * var(--ps)); margin: 0; }
.stage-inner { position: absolute; left: 50%; top: 0; width: 1360px; height: 660px; margin-left: -680px; transform: scale(var(--ps)); transform-origin: top center; }

/* the day's arc over the headline: the words sit on the horizon, the prayers on the sun's path above them.
   The padding is the room the arc needs. live.js sets it for the real headline on each screen (and redraws
   the arc in real pixels), so these numbers only matter before the script runs. */
.sky-head { position: relative; margin: 0 auto 34px; padding: 190px 0 32px; }
.sky { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; font-family: var(--font); }
/* the arc draws itself once; when live.js redraws it later (new times, a turned phone) it appears at once */
.sky-head.is-drawn .sky-trail { animation: none; stroke-dashoffset: 0; }
.sky-head.is-drawn .sky-halo, .sky-head.is-drawn .sky-sun { animation: none; opacity: 1; }
.sky-horizon { stroke: url(#sky-hz); stroke-width: 1; }
.sky-path { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.3; stroke-dasharray: 1.5 7; stroke-linecap: round; }
.sky-night { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.3; stroke-dasharray: 1.5 7; stroke-linecap: round; }
.sky-trail { fill: none; stroke: url(#sky-trail); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: trail 2.6s 0.5s var(--ease-out) forwards; }
.sky-halo { opacity: 0; animation: glow 1.4s 2.3s var(--ease) forwards; }
.sky-sun { fill: #FFF1DC; opacity: 0; filter: drop-shadow(0 0 12px rgba(246, 178, 107, 0.95)); animation: glow 1s 2.3s var(--ease) forwards; }
/* by night: a silver trail from Maghrib to the moon, the moon in its phase with a soft glow */
.sky-trail.is-night { stroke: url(#sky-trail-night); }
.sky-moon { opacity: 0; animation: glow 1.2s 2.3s var(--ease) forwards; filter: drop-shadow(0 0 6px rgba(225, 220, 255, 0.55)); }
.sky-head.is-drawn .sky-moon { animation: none; opacity: 1; }
.sky-moon-grain { mix-blend-mode: multiply; }
.sky.is-night .sky-dot.is-now { stroke: #D9D4FF; }
.sky.is-night .sky-label.is-now .sky-chip { stroke: rgba(217, 212, 255, 0.7); }
.sky.is-night .sky-label.is-now .sky-name { fill: #C9C2FF; }
.sky.is-night .sky-label.is-now .sky-time { fill: rgba(228, 224, 255, 0.92); }
.sky-dot { fill: var(--bg); stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.4; }
.sky-dot.is-past { fill: var(--rose-pale); stroke: none; }
.sky-dot.is-now { fill: var(--bg); stroke: var(--amber); stroke-width: 2.2; }
/* each time as a chip of one size, straight out from its dot, the name over the time, readable on any sky (sizes are set in sky.mjs). The time whose period it is now is lit. */
/* a light veil, the sky showing through, with a soft dark rim round the letters so they still read on bright cloud */
.sky-chip { fill: rgba(16, 11, 20, 0.28); stroke: rgba(255, 255, 255, 0.24); stroke-width: 1; }
.sky-label text { paint-order: stroke; stroke: rgba(10, 7, 12, 0.38); stroke-width: 3px; stroke-linejoin: round; }
.sky-name { fill: #FFFFFF; font-weight: 600; letter-spacing: -0.005em; }
.sky-time { fill: rgba(255, 255, 255, 0.94); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.sky-label.is-now .sky-chip { fill: rgba(16, 11, 20, 0.36); stroke: rgba(246, 178, 107, 0.75); stroke-width: 1.4; }
.sky-label.is-now .sky-name { fill: var(--amber); }
.sky-label.is-now .sky-time { fill: #FFE2BF; }
@keyframes trail { to { stroke-dashoffset: 0; } }
@keyframes glow { to { opacity: 1; } }

/* the three phones, drawn in CSS, fanned out from the middle when the page opens */
.phone { position: absolute; width: 268px; height: 560px; border-radius: 44px; background: linear-gradient(160deg, #2C2432 0%, #120E15 40%, #0B080D 100%); padding: 9px; box-shadow: 0 70px 120px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.24); }
.phone::before { content: ''; position: absolute; top: 19px; left: 50%; width: 84px; height: 22px; margin-left: -42px; border-radius: 12px; background: #0B080D; z-index: 2; }
/* a soft sheen across the glass */
.phone::after { content: ''; position: absolute; inset: 9px; border-radius: 35px; z-index: 3; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 26%, rgba(255, 255, 255, 0) 42%); }
.screen { width: 100%; height: 100%; border-radius: 35px; background: #FBF7F3; overflow: hidden; display: flex; flex-direction: column; color: #241A1E; }
.phone-home { left: 546px; top: 24px; z-index: 3; animation: rise 1.2s 0.3s var(--ease-out) both; }
.phone-qibla { left: 300px; top: 96px; z-index: 2; transform-origin: 50% 100%; transform: rotate(-6deg) scale(0.9); animation: fan-l 1.5s 0.5s var(--ease-out) both; }
.phone-doa { left: 792px; top: 96px; z-index: 2; transform-origin: 50% 100%; transform: rotate(6deg) scale(0.9); animation: fan-r 1.5s 0.5s var(--ease-out) both; }
@keyframes fan-l { from { opacity: 0; transform: translateX(230px) rotate(0) scale(0.86); } to { opacity: 1; transform: rotate(-6deg) scale(0.9); } }
@keyframes fan-r { from { opacity: 0; transform: translateX(-230px) rotate(0) scale(0.86); } to { opacity: 1; transform: rotate(6deg) scale(0.9); } }
.h-head { background: linear-gradient(180deg, var(--maroon), var(--deep)); color: #fff; padding: 44px 16px 18px; border-radius: 0 0 26px 26px; }
.h-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; text-align: left; }
.h-brand b { display: block; font-size: 12px; letter-spacing: 0.12em; }
.h-brand small { display: block; font-size: 10px; opacity: 0.8; }
.h-next { display: flex; justify-content: space-between; align-items: flex-end; text-align: left; }
.h-next-left small { display: block; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.h-next-left b { display: block; font-size: 24px; font-weight: 700; line-height: 1.1; }
.pill { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.35); font-size: 12px; font-weight: 600; }
.cd { display: flex; gap: 8px; }
.cd div { text-align: center; }
.cd b { display: block; font-size: 20px; font-weight: 700; line-height: 1; }
.cd small { display: block; font-size: 8.5px; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 3px; }
.h-list { list-style: none; margin: 14px 12px 0; padding: 4px 0; background: #fff; border: 1px solid #EAE0D9; border-radius: 18px; flex: 1; }
.h-list li { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; font-size: 12.5px; border-top: 1px solid #EAE0D9; }
.h-list li:first-child { border-top: 0; }
.h-list li b { font-weight: 600; }
.h-list li.is-next { background: #F6E6ED; color: var(--deep); font-weight: 600; margin: 0 6px; border-radius: 12px; border-top: 0; }
.h-list li.is-next + li { border-top: 0; }
.h-tabs { display: flex; justify-content: space-around; align-items: center; padding: 10px 14px 16px; }
.h-tabs i { width: 22px; height: 22px; border-radius: 7px; background: #F4EDE7; border: 1px solid #EAE0D9; }
.h-tabs i.on { width: 40px; height: 40px; border-radius: 50%; background: var(--maroon); border: 3px solid #fff; box-shadow: 0 6px 14px rgba(158, 27, 78, 0.35); margin-top: -18px; }
.q-head { padding: 44px 16px 8px; font-weight: 700; font-size: 14px; text-align: center; color: var(--deep); }
.dial { position: relative; width: 190px; height: 190px; margin: 14px auto 0; border-radius: 50%; background: #fff; border: 1px solid #EAE0D9; box-shadow: inset 0 0 0 10px #F4EDE7; }
.dial-ticks { position: absolute; inset: 6px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #6E5F66 0 1deg, transparent 1deg 15deg); -webkit-mask: radial-gradient(circle, transparent 78%, #000 79%); mask: radial-gradient(circle, transparent 78%, #000 79%); opacity: 0.55; }
.needle { position: absolute; left: 50%; top: 50%; width: 4px; height: 74px; margin-left: -2px; margin-top: -74px; transform-origin: 50% 100%; transform: rotate(-68deg); background: linear-gradient(180deg, var(--maroon), var(--deep)); border-radius: 3px; }
.kaaba { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; transform: rotate(-68deg) translateY(-84px); background: #1B1216; border-radius: 3px; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #1B1216; }
.dial-centre { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--maroon); border: 2px solid #fff; }
.q-stats { display: flex; justify-content: center; gap: 18px; align-items: baseline; margin-top: 18px; }
.q-stats b { font-size: 28px; font-weight: 700; color: var(--deep); }
.q-stats span { color: #6E5F66; font-size: 13px; }
.q-hint { text-align: center; color: #6E5F66; font-size: 11.5px; padding: 0 28px; }
/* the doa phone, drawn like the Qibla phone: the hands in a round dial, then the doa, its rumi, meaning and source */
.d-dial { display: grid; place-items: center; width: 92px; height: 92px; margin: 6px auto 0; border-radius: 50%; background: #fff; border: 1px solid #EAE0D9; box-shadow: inset 0 0 0 8px #F4EDE7; }
.d-hands { width: 40px; height: 40px; background: var(--maroon); -webkit-mask: url(/assets/doa-hands.png) center / contain no-repeat; mask: url(/assets/doa-hands.png) center / contain no-repeat; }
.d-title { display: block; margin: 12px 16px 0; font-size: 12.5px; font-weight: 700; text-align: center; color: var(--deep); }
.d-ar { margin: 8px 16px 0; font-family: var(--arabic); font-size: 19px; line-height: 1.95; text-align: center; color: #2A1A21; }
.d-rumi { margin: 4px 18px 0; font-size: 10px; line-height: 1.45; font-style: italic; text-align: center; color: var(--deep); }
.d-mean { margin: 8px 20px 0; font-size: 10.5px; line-height: 1.5; text-align: center; color: #6E5F66; }
.d-src { display: block; width: max-content; margin: 10px auto 0; padding: 4px 10px; border-radius: 999px; background: #F6E6ED; color: var(--deep); font-size: 9.5px; font-weight: 600; }
/* the Quran phone: Al-Fatihah with the first ayah lit as the reciter reads it */

/* sections */
/* the app's Islamic pattern, plain and even behind every section between the hero and the footer, as on the app's pages */
.ground { position: relative; isolation: isolate; }
/* the join with the hero: the pattern rises out of the page colour over the first stretch instead of starting on a line */
.ground::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 220px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--bg) 0%, rgba(13, 10, 16, 0.85) 35%, rgba(13, 10, 16, 0) 100%); }
.ground::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.09; background: linear-gradient(160deg, var(--rose) 0%, var(--amber) 100%); -webkit-mask-image: url(/assets/pattern-tile.png); -webkit-mask-size: 200px 200px; -webkit-mask-repeat: repeat; mask-image: url(/assets/pattern-tile.png); mask-size: 200px 200px; mask-repeat: repeat; }
.section { padding: var(--sec-pad) 0; position: relative; }
/* the menu links (#malaysia, #privacy, #download) land below the floating header, not under it */
.section[id] { scroll-margin-top: calc(var(--head) - 24px); }
/* the Download link lands on the Get SORASAF panel itself, just under the header, not on its section's padding */
#download { scroll-margin-top: calc(var(--head) + 12px - var(--sec-pad)); }
/* between sections a hairline with the eight-point star at its middle */
.section + .section::before { content: ''; position: absolute; left: 50%; top: 0; width: min(1180px, calc(100% - 48px)); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--line-2) 22%, var(--line-2) calc(50% - 30px), transparent calc(50% - 30px), transparent calc(50% + 30px), var(--line-2) calc(50% + 30px), var(--line-2) 78%, transparent); }
.section + .section::after { content: ''; position: absolute; left: 50%; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; background: var(--amber); opacity: 0.8; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M12 1.5 15 9l7.5 3-7.5 3-3 7.5-3-7.5L1.5 12 9 9z'/%3E%3Cpath d='M6.7 6.7h10.6v10.6H6.7z' transform='rotate(45 12 12)'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M12 1.5 15 9l7.5 3-7.5 3-3 7.5-3-7.5L1.5 12 9 9z'/%3E%3Cpath d='M6.7 6.7h10.6v10.6H6.7z' transform='rotate(45 12 12)'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Made for Malaysia: a split heading, the four figures as one wide band, the notes in two columns */
.split-head { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 72px; align-items: end; margin-bottom: 72px; }
.split-head h2 { margin: 0; }
.split-head .lead { margin: 0; padding-bottom: 8px; }
.figures { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); }
.figure { padding: 48px 28px 44px 32px; border-left: 1px solid var(--line); }
.figure:first-child { border-left: 0; padding-left: 0; }
.figure b { display: block; font-size: clamp(72px, 8.6vw, 132px); font-weight: 200; line-height: 0.82; letter-spacing: -0.065em; margin-left: -0.04em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: lining-nums; }
.figure span { display: block; margin-top: 22px; font-size: 14.5px; line-height: 1.45; color: var(--muted); max-width: 19ch; }
.notes { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px; }
.notes li { position: relative; padding: 28px 0 28px 30px; border-bottom: 1px solid var(--line); }
/* a small diamond, the star's centre, marks each note */
.notes li::before { content: ''; position: absolute; left: 2px; top: 37px; width: 7px; height: 7px; border: 1.5px solid var(--amber); transform: rotate(45deg); opacity: 0.85; }
.notes p { margin: 0; color: rgba(247, 242, 244, 0.84); font-size: 16.5px; line-height: 1.6; }

/* the privacy promise as three tiles: what stays on the phone across the top (its words beside the phone's own list), then deleting the account and the full policy side by side, the same height with nothing stretched */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tile { position: relative; overflow: hidden; isolation: isolate; border-radius: 36px; padding: 44px 44px 44px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); box-shadow: 0 50px 120px -60px rgba(0, 0, 0, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tile h3 { font-size: 27px; letter-spacing: -0.03em; margin: 28px 0 10px; }
.tile p { margin: 0; color: var(--muted); font-size: 16px; max-width: 44ch; text-wrap: pretty; }
.tile-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; background: linear-gradient(145deg, rgba(246, 178, 107, 0.22), rgba(240, 139, 170, 0.1)); box-shadow: inset 0 0 0 1px rgba(246, 178, 107, 0.26); color: var(--amber); }
.tile-phone { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; padding-bottom: 0; background: radial-gradient(55% 75% at 75% 100%, rgba(240, 139, 170, 0.16), transparent 72%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); }
.tile-phone .tile-copy { align-self: start; padding-bottom: 44px; }
/* the top of a phone rising from the foot of the tile, its screen listing what never leaves it */
.device { align-self: end; display: flex; justify-content: center; }
.device-screen { position: relative; width: min(100%, 372px); margin: 10px 10px 0; padding: 50px 16px 40px; border-radius: 42px 42px 0 0; background: linear-gradient(180deg, #1C1621, #110D14 70%); box-shadow: 0 0 0 9px #0B080D, 0 0 0 10px rgba(255, 255, 255, 0.13), 0 -30px 80px -20px rgba(0, 0, 0, 0.6); -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent); mask-image: linear-gradient(180deg, #000 84%, transparent); }
.device-screen::before { content: ''; position: absolute; top: 14px; left: 50%; width: 82px; height: 22px; margin-left: -41px; border-radius: 12px; background: #0B080D; }
.kept { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kept li { display: flex; align-items: center; gap: 12px; padding: 11px 14px 11px 11px; border-radius: 18px; background: rgba(255, 255, 255, 0.045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); font-size: 14.5px; font-weight: 500; text-align: left; }
.kept-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: rgba(246, 178, 107, 0.12); color: var(--amber); flex: none; }
.kept span { flex: 1; }
.kept-lock { display: grid; color: rgba(247, 242, 244, 0.42); }
/* the delete tile sets its steps at its foot, so the tile reads top to bottom: what, then where */
.tile-delete { display: flex; flex-direction: column; align-items: flex-start; }
/* the way to delete, as the app names it: three steps in a row */
.crumbs { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; margin: auto 0 0; padding: 34px 0 0; }
.crumbs li { position: relative; padding: 9px 17px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; font-weight: 500; color: var(--text); }
.crumbs li + li { margin-left: 26px; }
.crumbs li + li::before { content: ''; position: absolute; left: -17px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-top: 1.5px solid var(--muted); border-right: 1.5px solid var(--muted); transform: rotate(45deg); }
.crumbs li:last-child { background: rgba(240, 139, 170, 0.14); box-shadow: inset 0 0 0 1px rgba(240, 139, 170, 0.42); color: var(--rose-pale); }
/* the whole last tile is the link to the full policy: the seal at the top, the words and the arrow at its foot, read top to bottom like the delete tile beside it */
.tile-link { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; color: var(--text); transition: background 0.3s var(--ease); }
.tile-link:hover { text-decoration: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)); }
.tile-link:focus-visible { border-radius: 36px; outline-offset: 6px; }
.tile-emblem { flex: none; }
.tile-emblem svg { display: block; width: 120px; height: 120px; }
.tile-link-foot { display: flex; align-items: center; gap: 24px; }
.tile-link-text { flex: 1; font-size: 27px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; text-wrap: balance; }
.tile-arrow { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--text); color: var(--bg); flex: none; transition: transform 0.25s var(--ease); }
.tile-link:hover .tile-arrow { transform: translateX(4px); }
/* the seal (emblem() in build.mjs): line widths are screen pixels */
.em-ring { fill: none; stroke: url(#em-line); stroke-width: 1; opacity: 0.4; }
.em-star { fill: url(#em-fill); stroke: url(#em-line); stroke-width: 1.25; stroke-linejoin: round; }
.em-core { fill: var(--bg-3); stroke: rgba(246, 178, 107, 0.5); stroke-width: 1; }
.em-shield { fill: none; stroke: var(--amber); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* the closing block: wider than the page column, the du'a photo behind it */
.cta { position: relative; width: min(1340px, calc(100% - 32px)); margin: 0 auto; text-align: center; padding: 168px 40px 156px; border-radius: 48px; background: var(--bg-2); box-shadow: 0 60px 140px -50px rgba(0, 0, 0, 0.85); overflow: hidden; isolation: isolate; }
/* the photo of a man in du'a behind the panel, under a dark veil that deepens where the words sit */
.cta-bg { position: absolute; inset: 0; z-index: -1; }
.cta-bg picture, .cta-bg img { width: 100%; height: 100%; }
.cta-bg img { object-fit: cover; object-position: 30% 45%; }
.cta-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 50%, rgba(13, 10, 16, 0.8), rgba(13, 10, 16, 0.5) 62%, rgba(13, 10, 16, 0.3) 100%), linear-gradient(180deg, rgba(13, 10, 16, 0.35), rgba(13, 10, 16, 0.6)); }
.cta > :not(.cta-bg) { position: relative; }
.cta h2 { font-size: clamp(46px, 7vw, 112px); line-height: 0.95; letter-spacing: -0.055em; margin-bottom: 22px; background: var(--grad-title); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.05em; }
.cta .lead { margin: 0 auto 44px; color: rgba(247, 242, 244, 0.76); font-size: 20px; }

/* prose pages */
main.narrow { padding: 88px 0 48px; }
.prose { max-width: 720px; }
.prose h1 { font-size: clamp(40px, 5.4vw, 68px); margin-bottom: 16px; }
.prose h2 { font-size: 25px; letter-spacing: -0.025em; margin-top: 56px; }
.prose p, .prose li { font-size: 17px; line-height: 1.75; color: rgba(247, 242, 244, 0.84); text-wrap: pretty; }
.prose li { margin-bottom: 8px; }
.prose .lead { font-size: 19.5px; color: var(--muted); margin-bottom: 8px; }
.prose ol { padding-left: 22px; }
.prose ol li::marker { color: var(--amber); font-weight: 600; }
.prose p.muted { color: var(--muted); font-size: 14px; }

/* the moving frieze above the footer: the seven modules with the app's icons, gliding left, star ornaments between */
#download { padding-bottom: 88px; }
.frieze { position: relative; margin-top: 0; border-top: 1px solid var(--line); overflow: hidden; background: #000; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.frieze::before, .frieze::after { content: ''; position: absolute; top: 0; bottom: 0; width: 18%; z-index: 1; pointer-events: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.frieze::before { left: 0; -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); }
.frieze::after { right: 0; -webkit-mask-image: linear-gradient(270deg, #000, transparent); mask-image: linear-gradient(270deg, #000, transparent); }
.fz-track { display: flex; width: max-content; animation: glide 46s linear infinite; }
.frieze:hover .fz-track { animation-play-state: paused; }
.fz-row { display: flex; align-items: center; flex: none; padding: 26px 0; }
.fz-item { display: inline-flex; align-items: center; gap: 12px; padding: 0 30px; white-space: nowrap; color: var(--text); font-size: 15px; font-weight: 500; }
.fz-item .ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: transparent; border: 1px solid var(--line-2); color: var(--amber); flex: none; }
.fz-item .ico svg { display: block; }
.fz-item .doa { width: 22px; height: 22px; background: var(--amber); -webkit-mask: url(/assets/doa-hands.png) center / contain no-repeat; mask: url(/assets/doa-hands.png) center / contain no-repeat; }
.fz-star { display: grid; place-items: center; color: var(--amber); opacity: 0.6; flex: none; }
@keyframes glide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* footer: the brand and three short columns, a bottom bar, and the name very large, cut by the foot of the page */
.foot { position: relative; background: #000; border-top: 1px solid var(--line); padding: 88px 0 0; overflow: hidden; }
.foot-top { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: start; }
.foot-tagline { margin: 18px 0 0; color: var(--muted); font-size: 15.5px; max-width: 28ch; }
.foot-cols { display: grid; grid-template-columns: repeat(3, auto); gap: 72px; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.foot-col h2 { margin: 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: rgba(247, 242, 244, 0.42); }
.foot-col a { color: rgba(247, 242, 244, 0.84); font-size: 14.5px; }
.foot-col a:hover { color: #fff; text-decoration: none; }
.foot-col a[aria-current] { color: var(--amber); }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 80px; padding: 26px 0; border-top: 1px solid var(--line); color: var(--faint); font-size: 13.5px; }
.foot-bottom p { margin: 0; }
.foot-word { margin: 0 0 -0.17em; text-align: center; font-weight: 700; font-size: clamp(76px, 18.6vw, 300px); line-height: 0.78; letter-spacing: -0.035em; white-space: nowrap; user-select: none; pointer-events: none; background: linear-gradient(180deg, rgba(247, 242, 244, 0.14) 0%, rgba(247, 242, 244, 0.02) 70%, rgba(247, 242, 244, 0) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* scroll reveal, only where the browser can drive it from the scroll position */
@supports (animation-timeline: view()) {
  /* the phones fan in as their section comes into view, not while it is still below the screen */
  .phone-home, .phone-qibla, .phone-doa { animation-delay: 0s; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  .reveal { animation: rise 1s var(--ease) both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
}

/* every width: the stage scales as one drawing, the columns fold, the type steps down */
@media (max-width: 1400px) { .stage { --ps: 0.86; } }
@media (max-width: 1180px) { .stage { --ps: 0.78; } }
@media (max-width: 1040px) { .stage { --ps: 0.7; } }
@media (max-width: 960px) {
  .hero { padding-top: calc(var(--head) + 16px); }
  .stage { --ps: 0.55; }
  :root { --sec-pad: 104px; }
  .split-head { grid-template-columns: 1fr; gap: 22px; margin-bottom: 56px; }
  .figures { grid-template-columns: 1fr 1fr; }
  .figure:nth-child(3) { border-left: 0; padding-left: 0; }
  .figure:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .notes { column-gap: 40px; }
  .bento { grid-template-columns: 1fr; }
  .tile-phone { grid-column: auto; grid-template-columns: 1fr; }
  .tile-phone .tile-copy { padding-bottom: 0; }
  .device { margin-top: 40px; }
  .foot-top { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 720px) {
  :root { --head: 86px; }
  .top { padding: 12px 0; }
  .top-row { height: 62px; padding: 0 8px 0 12px; }
  .wrap { width: calc(100% - 32px); }
  .nav { display: none; }
  .menu { display: block; }
  .hero { padding-top: calc(var(--head) + 8px); }
  .sky-head { padding: 170px 0 30px; margin-bottom: 28px; }
  .now { gap: 7px; }
  .now[hidden] { height: 150px; }
  .live { margin: -34px auto 14px; }
  .live.is-waiting { min-height: 134px; }
  .live.is-waiting:lang(ms) { min-height: 153px; }
  .now-clock { font-size: 34px; }
  .now-prayer { font-size: 13px; min-height: calc(1.65em + 12px); padding: 6px 14px 6px 10px; }
  .now-next { font-size: 13px; }
  .now-date { flex-direction: column; gap: 2px; font-size: 12.5px; }
  .now-hijri:not([hidden]) + .now-masihi::before { display: none; }
  .inside { margin-top: 28px; gap: 6px 11px; font-size: 13px; }
  .live-place { font-size: 12.5px; flex-wrap: wrap; justify-content: center; border-radius: 18px; padding: 6px 12px; }
  .live-place b { max-width: 100%; white-space: normal; }
  .live-place span { white-space: normal; flex-basis: 100%; text-align: center; font-size: 11.5px; }
  .stage { --ps: 0.56; }
  .screens { padding-top: 24px; }
  :root { --sec-pad: 84px; }
  .notes { grid-template-columns: 1fr; }
  .tile { padding: 32px 26px; border-radius: 30px; }
  .tile-phone { padding-bottom: 0; }
  .tile h3 { font-size: 23px; margin-top: 22px; }
  .device { margin-top: 32px; min-height: 360px; }
  .tile-link { gap: 28px; }
  .tile-link:focus-visible { border-radius: 30px; }
  .tile-emblem svg { width: 96px; height: 96px; }
  .tile-link-text { font-size: 23px; }
  .tile-arrow { width: 46px; height: 46px; }
  .cta { padding: 104px 20px 96px; border-radius: 34px; width: calc(100% - 24px); }
  .mark.lg { width: 78px; height: 78px; margin-bottom: 36px; }
  #download { padding-bottom: 64px; }
  .foot { padding-top: 64px; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .foot-bottom { flex-direction: column; gap: 6px; margin-top: 56px; }
  .prose h2 { margin-top: 40px; }
  main.narrow { padding: 56px 0 24px; }
}
@media (max-width: 480px) {
  h1 { font-size: clamp(42px, 12vw, 54px); }
  .hero-copy h1 { font-size: clamp(34px, 9.6vw, 42px); }
  h2 { font-size: clamp(34px, 9.6vw, 44px); }
  .lead { font-size: 17px; }
  .stage { --ps: 0.5; }
  .figure { padding: 32px 14px 30px 18px; }
  .figure:nth-child(odd) { padding-left: 0; }
  .figure span { font-size: 13px; margin-top: 16px; }
  .badge { flex: 1; min-width: 0; padding: 7px 14px 7px 7px; gap: 10px; }
  .badge-glyph { width: 38px; height: 38px; }
  .badge-text b { font-size: 15px; }
  .cta { padding-left: 14px; padding-right: 14px; }
  .cta .lead { font-size: 17px; }
  .crumbs li { padding: 8px 12px; font-size: 13px; }
  .crumbs li + li { margin-left: 20px; }
  .crumbs li + li::before { left: -13px; width: 5px; height: 5px; margin-top: -2.5px; }
}
@media (max-width: 380px) { .now-clock { font-size: 30px; } .now-prayer { font-size: 12px; padding: 5px 12px 5px 9px; min-height: calc(1.65em + 10px); } .now-next { font-size: 12px; } .now-date { font-size: 11.5px; } .stage { --ps: 0.46; } .wordmark { font-size: 12px; letter-spacing: 0.2em; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-copy > *, .phone, .hero-bg img, .reveal, .fz-track, .sky-halo, .sky-sun, .sky-trail, .now-dot, .sky-moon { animation: none; }
  .sky-trail { stroke-dashoffset: 0; }
  .sky-halo, .sky-sun, .sky-moon { opacity: 1; }
  .badge, .link.arrow::after { transition: none; }
}
@media print { .reveal, .hero-copy > *, .phone { animation: none; } .top { position: static; } body { background: #fff; color: #000; } body::after { display: none; } .hero-copy h1 { color: #000; background: none; } }