/* Newsreader and Amiri are self-hosted (SIL Open Font License; see assets/fonts). Apple devices use the system's
   Iowan Old Style and Geeza Pro first, so these load only where those are missing, and only for the characters used. */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("assets/fonts/newsreader-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("assets/fonts/newsreader-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/newsreader-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/newsreader-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/amiri-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
/* Daraja brand tokens: ios/Packages/DeenKit/Sources/DeenBrand/DarajaBrand.swift + DeenTheme.swift */
:root {
  --canvas: #F0EFEB;
  --surface: #F8F7F2;
  --border: #DDDCD5;
  --ink: #202320;
  --ink-soft: #3A3F39;
  --muted: #626961;
  --accent: #154329;
  --forest: #214A36;
  --forest-deep: #103C26;
  --ivory: #F6EFD9;
  --ivory-warm: #FFF4DF;
  --action-text: #FFF8EC;
  --tint: #EAF0E9;
  --gold: #C9A961;
  --champagne: #E6C88F;

  /* Role tokens: text vs. fill colours that change in dark mode */
  --heading: var(--forest-deep);
  --accent-text: var(--accent);
  --action: var(--accent);
  --card: #FBFAF6;
  --card-hi: #FFFDF6;
  --glass: rgba(255,253,246,.92);
  --nav-bg: rgba(240,239,235,.78);
  --map-bg: #FBF9F1;

  --serif: "Iowan Old Style", "Newsreader", "Palatino Linotype", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --arabic: "Geeza Pro", "Amiri", "Noto Naskh Arabic", serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.22, 0.8, 0.26, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --radius-xl: 36px;
  --radius-l: 26px;
  --radius-m: 18px;
  --shadow-card: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(16,60,38,.06), 0 12px 32px -12px rgba(16,60,38,.18);
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(96px, 12vw, 152px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
.sprite { position: absolute; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

.overline {
  font: 600 12px/1 var(--rounded);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 46px; padding: 0 22px;
  border-radius: 999px;
  background: var(--action); color: var(--action-text);
  font: 500 15px/1 var(--sans);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px -6px rgba(16,60,38,.55);
  transition: transform .2s var(--ease-soft), background-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
}
.btn:hover { background: var(--forest-deep); transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn-ghost { background: rgba(248,247,242,.8); color: var(--ink); box-shadow: 0 0 0 1px var(--border) inset; }
.btn-ghost:hover { background: var(--surface); }
.btn-ghost .i { transition: transform .22s var(--spring); }
.btn-ghost:hover .i { transform: translateX(3px); }
.btn-small { height: 36px; padding: 0 16px; font-size: 14px; }

/* Nav */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--gutter);
  transition: background-color .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}
.nav.is-scrolled {
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  box-shadow: 0 1px 0 rgba(32,35,32,.06);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font: 500 21px/1 var(--serif); color: var(--heading); }
.brand img { border-radius: 8px; box-shadow: 0 2px 6px rgba(16,60,38,.25); }
.nav-links { display: flex; gap: 28px; font-size: 15px; color: var(--ink-soft); }
.nav-links a { position: relative; padding: 4px 0; transition: color .2s; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .36s var(--ease-soft); }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }

/* Hero: light brand canvas with a quiet star lattice and drifting light; the real app is the picture */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(128px, 17vh, 176px) var(--gutter) 0; text-align: center;
  background: linear-gradient(180deg, #F6F4EC 0%, var(--canvas) 100%);
}
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Soft light from radial gradients: the same glow as a heavy blur, without repainting a blur every frame.
   Placed against the screen height rather than the hero, so nothing moves if the hero settles late. */
.aurora { position: absolute; inset: 0; opacity: .85; overflow: hidden; }
.aurora i { position: absolute; border-radius: 50%; margin: -12vw; padding: 12vw; box-sizing: content-box; will-change: transform; animation: drift 24s var(--ease-io) infinite alternate; }
.aurora i:nth-child(1) { width: 52vw; aspect-ratio: 1; left: -16vw; top: 28vh; background: radial-gradient(closest-side, #CFE0D2 55%, rgba(207,224,210,0)); }
.aurora i:nth-child(2) { width: 42vw; aspect-ratio: 1; right: -12vw; top: -12vh; background: radial-gradient(closest-side, #F2E3C0 55%, rgba(242,227,192,0)); animation-duration: 28s; animation-delay: -7s; }
.aurora i:nth-child(3) { width: 36vw; aspect-ratio: 1; left: 32vw; top: 81vh; background: radial-gradient(closest-side, #DCE9DA 55%, rgba(220,233,218,0)); animation-duration: 32s; animation-delay: -13s; }
@keyframes drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(5%, -4%, 0) scale(1.1); }
  100% { transform: translate3d(-4%, 5%, 0) scale(.95); }
}
.girih { position: absolute; inset: 0; color: var(--gold); opacity: .22;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 28%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 28%, #000 0%, transparent 75%); }

.hero-copy { max-width: 820px; }
.hero h1 {
  margin-top: 18px;
  font-size: clamp(44px, 7.4vw, 92px); line-height: 1.02; letter-spacing: -0.035em;
  color: var(--heading);
}
.lede { margin: 22px auto 0; max-width: 32ch; font-size: clamp(17px, 2vw, 20px); color: var(--ink-soft); }
.hero-actions { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 32px; }
.release-note { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }
.btn-lg .i { transition: transform .22s var(--spring); }
.btn-lg:hover .i { transform: translateY(2px); }
.store-badge { display: inline-block; border-radius: 10px; transition: transform .22s var(--spring), filter .2s; }
.store-badge img { height: 50px; width: auto; }
.store-badge:hover { transform: translateY(-2px); filter: drop-shadow(0 8px 14px rgba(0,0,0,.18)); }
.store-badge:active { transform: scale(.97); }

/* Rotating word: the line re-centres as the word width eases */
/* Until the script measures the word, the box starts at the width of "worship.", so the headline never rewraps after it paints. */
.rotator { position: relative; display: inline-block; vertical-align: bottom; height: 1.12em; width: var(--uw, 3.2em); font-style: italic; color: var(--accent-text); transition: width .56s var(--ease-io); }
.rotator-word { position: absolute; left: 0; bottom: 0; white-space: nowrap; padding-right: .06em; }
.rotator-word.is-entering { animation: word-in .55s var(--ease-out) both; }
.rotator-word.is-leaving { animation: word-out .4s var(--ease-soft) both; }
@keyframes word-in { from { opacity: 0; filter: blur(.08em); transform: translateY(.22em); } }
@keyframes word-out { to { opacity: 0; filter: blur(.08em); transform: translateY(-.22em); } }
.rotator::after { content: ""; position: absolute; left: 0; right: .1em; bottom: -.02em; height: .05em; background: linear-gradient(90deg, var(--gold), var(--champagne)); border-radius: 2px; opacity: .85; }

/* Entrance: blur + rise, staggered via --d */
.enter { animation: enter .9s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 90ms + 120ms); }
.d1 { --d: 1; } .d2 { --d: 2; } .d3 { --d: 3; }
@keyframes enter { from { opacity: 0; filter: blur(8px); transform: translateY(14px); } }
/* The headline is the page's largest paint, so it is visible from the first frame: it settles and sharpens rather than
   fading in from nothing, which browsers would not count as painted until much later. */
h1.enter { animation-name: enter-headline; }
@keyframes enter-headline { from { filter: blur(6px); transform: translateY(12px); } }

.hero-stage { position: relative; width: min(340px, 74vw); margin-top: clamp(48px, 7vw, 72px); }
.phone {
  position: relative; border-radius: 44px; padding: 9px;
  background: linear-gradient(145deg, #2A2E2A, #0F120F);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 40px 80px -30px rgba(16,60,38,.55), 0 18px 36px -18px rgba(0,0,0,.35);
}
.phone img, .phone-media { display: block; border-radius: 36px; width: 100%; height: auto; aspect-ratio: 1206 / 2622; object-fit: cover; background: #DDE4E6; }
.phone-hero { margin-bottom: -26%; animation: phone-rise 1.2s var(--ease-out) .15s both; will-change: transform; }
@keyframes phone-rise { from { transform: translateY(80px) scale(.96); } }

.chips { display: contents; }
.chip {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px;
  border-radius: 18px;
  background: rgba(248,247,242,.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--shadow-card);
  text-align: left; white-space: nowrap;
  animation: chip-in .8s var(--ease-out) both, bob 6s ease-in-out infinite;
}
.chip b { display: block; font: 500 15px/1.2 var(--serif); color: var(--ink); }
.chip small { display: block; font-size: 12px; color: var(--muted); }
.chip-a { left: -46%; top: 14%; animation-delay: 1.1s, 1.9s; }
.chip-b { right: -48%; top: 30%; animation-delay: 1.3s, 2.6s; }
.chip-c { left: -40%; top: 48%; animation-delay: 1.5s, 3.2s; }
@keyframes chip-in { from { opacity: 0; transform: translateY(16px) scale(.94); filter: blur(4px); } }
@keyframes bob { 50% { translate: 0 -7px; } }
.chip-orb, .chip-icon, .chip-ring { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.chip-orb { background: radial-gradient(circle at 35% 30%, #3E7A57, var(--accent)); color: var(--action-text); font-size: 16px; box-shadow: 0 0 0 3px rgba(201,169,97,.35); }
.chip-icon { background: var(--tint); color: var(--accent-text); font-size: 18px; }
.chip-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
circle { fill: none; stroke-width: 3.5; stroke: var(--border); }
.ring-fill { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: 94.25; transition: stroke-dashoffset 1.6s var(--ease-out); }
.chip-ring .ring-fill { animation: ring 1.6s var(--ease-out) 1.6s forwards; }
@keyframes ring { to { stroke-dashoffset: 28.3; } }
.inline-link { color: var(--accent-text); text-decoration: underline; text-decoration-color: rgba(21,67,41,.35); text-underline-offset: 3px; }
.inline-link:hover { text-decoration-color: var(--accent-text); }

/* Scroll reveal */
.reveal { opacity: 0; filter: blur(4px); transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), filter .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.reveal.is-in { opacity: 1; filter: none; transform: none; }

/* Section heads */
.section-head { text-align: center; max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.section-head h2, .pacts h2, .launch h2 { margin-top: 14px; font-size: clamp(34px, 5vw, 56px); line-height: 1.06; color: var(--heading); }

/* Day story */
.day { padding: var(--section-y) 0 0; }
.day-grid {
  max-width: 1160px; margin: clamp(40px, 6vw, 72px) auto 0; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr);
}
/* Day sky: the app's own landscape, rendered from Fajr to Isha and crossfaded with scroll behind the story. */
.day { position: relative; }
.day > :not(.day-sky) { position: relative; z-index: 1; }
.day-sky { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100lvh; margin-bottom: -100vh; margin-bottom: -100lvh; overflow: hidden; pointer-events: none; opacity: var(--sky-o, 0); background: #C9D9E3; transform: translateY(var(--sky-lift, 0px)); }
.day-sky::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: calc(55vh + 2px); background: linear-gradient(rgba(240,239,235,0), rgba(240,239,235,.08) 18%, rgba(240,239,235,.3) 40%, rgba(240,239,235,.62) 62%, rgba(240,239,235,.88) 82%, var(--canvas) calc(100% - 4px)); opacity: var(--sky-edge, 0); }
.sky-frame { position: absolute; inset: 0; background: center bottom / cover no-repeat; opacity: 0; }
.sky-frame.f0 { opacity: 1; }
/* The sun and moon travel between the sky and a copy of the frames cut to the hill, so they rise and set behind it. */
.sky-sun { position: absolute; left: 0; top: 0; width: 46vmin; height: 46vmin; margin: -23vmin 0 0 -23vmin; border-radius: 50%; background: radial-gradient(circle, #FFFEF8 0 10%, rgba(255,251,236,.95) 11.5%, rgba(255,242,212,.5) 20%, rgba(255,236,200,.18) 40%, rgba(255,236,200,0) 70%); transform: translate(var(--sun-x, 10vw), var(--sun-y, 80vh)); opacity: var(--sun-o, 0); will-change: transform; }
.sky-moon { position: absolute; right: 10vw; top: 11vh; width: 13vmin; height: 13vmin; background: center / contain no-repeat; opacity: var(--moon-o, 0); transform: translateY(calc((1 - var(--moon-o, 0)) * 6vh)); filter: drop-shadow(0 0 1.6vmin rgba(214,230,255,.5)) drop-shadow(0 0 5vmin rgba(194,214,255,.2)); }
.sky-land { position: absolute; inset: 0; -webkit-mask: center bottom / cover no-repeat; mask: center bottom / cover no-repeat; }
/* The moon and the hill mask load with the frames, once the story is near. */
.day-sky.is-near .sky-moon { background-image: url("assets/day/moon.webp"); }
.day-sky.is-near .sky-land { -webkit-mask-image: url("assets/day/land-d.webp"); mask-image: url("assets/day/land-d.webp"); }
.day-sky.is-near .f0 { background-image: url("assets/day/d0.webp"); }
.day-sky.is-near .f1 { background-image: url("assets/day/d1.webp"); }
.day-sky.is-near .f2 { background-image: url("assets/day/d2.webp"); }
.day-sky.is-near .f3 { background-image: url("assets/day/d3.webp"); }
.day-sky.is-near .f4 { background-image: url("assets/day/d4.webp"); }
.day-sky.is-near .f5 { background-image: url("assets/day/d5.webp"); }
.day-sky.is-near .f6 { background-image: url("assets/day/d6.webp"); }
.day-sky.is-near .f7 { background-image: url("assets/day/d7.webp"); }
.day-sky.is-near .f8 { background-image: url("assets/day/d8.webp"); }
.day-sky.is-near .f9 { background-image: url("assets/day/d9.webp"); }
@media (max-width: 700px) {
  .day-sky.is-near .sky-land { -webkit-mask-image: url("assets/day/land-m.webp"); mask-image: url("assets/day/land-m.webp"); }
  .sky-moon { right: 7vw; top: 11vh; width: 21vmin; height: 21vmin; }
  .day-sky.is-near .f0 { background-image: url("assets/day/m0.webp"); }
  .day-sky.is-near .f1 { background-image: url("assets/day/m1.webp"); }
  .day-sky.is-near .f2 { background-image: url("assets/day/m2.webp"); }
  .day-sky.is-near .f3 { background-image: url("assets/day/m3.webp"); }
  .day-sky.is-near .f4 { background-image: url("assets/day/m4.webp"); }
  .day-sky.is-near .f5 { background-image: url("assets/day/m5.webp"); }
  .day-sky.is-near .f6 { background-image: url("assets/day/m6.webp"); }
  .day-sky.is-near .f7 { background-image: url("assets/day/m7.webp"); }
  .day-sky.is-near .f8 { background-image: url("assets/day/m8.webp"); }
  .day-sky.is-near .f9 { background-image: url("assets/day/m9.webp"); }
}
/* One glass sheet covers the scene: clear glass behind the demos on the left, thin frost behind the words on the
   right. Between them the blur builds in steps (a progressive blur) and the frost follows on a smooth curve, so there
   is no line where one becomes the other. The frost is a pale version of the sky at that moment, set from the
   scenery as it scrolls (--frost), so it reads as morning haze, midday light, sunset or night rather than plain white. */
.sky-glass { --split: calc((100% - min(100%, 1160px)) / 2 + var(--gutter) + (min(100%, 1160px) - 2 * var(--gutter)) * .42); position: absolute; inset: 0; }
.sky-glass > i { position: absolute; inset: 0; }
.sky-glass .g0 { -webkit-backdrop-filter: blur(9px) saturate(1.2); backdrop-filter: blur(9px) saturate(1.2); }
.sky-glass .g1 { -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px); -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--split) + -26vw), #000 calc(var(--split) + -16vw), #000 calc(var(--split) + -8vw), transparent calc(var(--split) + 2vw)); mask-image: linear-gradient(90deg, transparent calc(var(--split) + -26vw), #000 calc(var(--split) + -16vw), #000 calc(var(--split) + -8vw), transparent calc(var(--split) + 2vw)); }
.sky-glass .g2 { -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--split) + -18vw), #000 calc(var(--split) + -9vw), #000 calc(var(--split) + 0vw), transparent calc(var(--split) + 6vw)); mask-image: linear-gradient(90deg, transparent calc(var(--split) + -18vw), #000 calc(var(--split) + -9vw), #000 calc(var(--split) + 0vw), transparent calc(var(--split) + 6vw)); }
.sky-glass .g3 { -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25); -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.000) calc(var(--split) + -12.00vw), rgba(0,0,0,0.074) calc(var(--split) + -9.50vw), rgba(0,0,0,0.259) calc(var(--split) + -7.00vw), rgba(0,0,0,0.500) calc(var(--split) + -4.50vw), rgba(0,0,0,0.741) calc(var(--split) + -2.00vw), rgba(0,0,0,0.926) calc(var(--split) + 0.50vw), rgba(0,0,0,1.000) calc(var(--split) + 3.00vw)); mask-image: linear-gradient(90deg, rgba(0,0,0,0.000) calc(var(--split) + -12.00vw), rgba(0,0,0,0.074) calc(var(--split) + -9.50vw), rgba(0,0,0,0.259) calc(var(--split) + -7.00vw), rgba(0,0,0,0.500) calc(var(--split) + -4.50vw), rgba(0,0,0,0.741) calc(var(--split) + -2.00vw), rgba(0,0,0,0.926) calc(var(--split) + 0.50vw), rgba(0,0,0,1.000) calc(var(--split) + 3.00vw)); }
.sky-glass .gt { background: linear-gradient(170deg, rgba(var(--frost), .18), rgba(var(--frost), 0) 42%), linear-gradient(90deg, rgba(var(--frost), calc(var(--sheet-b, .5) * 0.000)) calc(var(--split) + -24.00vw), rgba(var(--frost), calc(var(--sheet-b, .5) * 0.074)) calc(var(--split) + -19.50vw), rgba(var(--frost), calc(var(--sheet-b, .5) * 0.259)) calc(var(--split) + -15.00vw), rgba(var(--frost), calc(var(--sheet-b, .5) * 0.500)) calc(var(--split) + -10.50vw), rgba(var(--frost), calc(var(--sheet-b, .5) * 0.741)) calc(var(--split) + -6.00vw), rgba(var(--frost), calc(var(--sheet-b, .5) * 0.926)) calc(var(--split) + -1.50vw), rgba(var(--frost), calc(var(--sheet-b, .5) * 1.000)) calc(var(--split) + 3.00vw)); }
/* Where the section begins, the scenery fades up out of the page instead of starting at a hard edge. */
.day-sky::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 60vh; background: linear-gradient(var(--canvas), rgba(240,239,235,.86) 22%, rgba(240,239,235,.5) 52%, rgba(240,239,235,0)); opacity: var(--sky-top, 1); pointer-events: none; }
.day .step-copy { display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(28px, 4.4vw, 64px) 48px clamp(32px, 5vw, 72px); }
.day .step-feature { align-content: center; justify-items: center; padding: 56px clamp(20px, 2.4vw, 32px); }
/* The phones shrink on shorter screens so each prayer still fits one screen. */
@media (min-width: 901px) and (max-height: 880px) { .day .step-feature .iphone { zoom: .9; } }
@media (min-width: 901px) and (max-height: 810px) { .day .step-feature .iphone { zoom: .82; } }
@media (min-width: 901px) and (max-height: 730px) { .day .step-feature .iphone { zoom: .72; } }
@media (min-width: 901px) and (max-height: 650px) { .day .step-feature .iphone { zoom: .64; } }
.day .step-feature .iphone { box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 22px 44px -26px rgba(16,24,40,.42); }
.day .step-copy > p:not(.step-time), .day .step-copy > p.step-extra { color: #1E221D; }
.day .step-link { color: #0E2E1C; text-decoration-color: rgba(14,46,28,.45); }
.day { --frost: 255, 255, 255; }
.day.is-dusk { --sheet-b: .72; }
.day .step-time { color: #2E2206; }


.steps { list-style: none; margin: 0; padding: 0 0 24vh; }
/* One prayer per screen. */
.step { min-height: 84vh; display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); align-items: stretch; }
/* The feature leads on the left and the words explain it on the right. */
.step .step-feature { order: -1; }
.step-time { font: 600 12px/1 var(--rounded); letter-spacing: .16em; text-transform: uppercase; color: #5F470D; }
.step h3 { margin-top: 14px; font-size: clamp(30px, 4.2vw, 54px); line-height: 1.06; color: var(--heading); }
.step-copy > p:not(.step-time) { margin-top: 18px; max-width: 40ch; font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-soft); }
.step-copy > p.step-extra { margin-top: 14px; font-size: 16px; color: var(--muted); }
.step-link { display: inline-block; margin-top: 16px; font-size: 15px; }
.step-feature { display: grid; gap: 14px; justify-items: start; }
.step-feature > * { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.step-feature > *:nth-child(2) { transition-delay: .12s; }
.step-feature.is-on > * { opacity: 1; transform: none; }

/* Feature cards inside the day story */
.alarm-top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: rgba(255,255,255,.78); }
.alarm-app { display: inline-flex; align-items: center; gap: 8px; }
.alarm-app img { border-radius: 5px; }
.alarm-bell { font-size: 20px; color: var(--champagne); display: grid; transform-origin: 50% 10%; }
@keyframes ring-bell { 0%, 40%, 100% { transform: rotate(0); } 5% { transform: rotate(16deg); } 10% { transform: rotate(-14deg); } 15% { transform: rotate(10deg); } 20% { transform: rotate(-8deg); } 25% { transform: rotate(4deg); } }
.alarm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.alarm-btn { display: grid; place-items: center; height: 46px; border-radius: 999px; font: 500 16px var(--sans); }
.alarm-open { background: rgba(255,255,255,.16); color: #fff; }
.alarm-stop { background: #F2A23A; color: #1E1405; }
/* Fajr wake-up challenge: alarm on the Lock Screen, then the photo task in Daraja. */
.wake-screen { background: linear-gradient(180deg, #2C3E5C 0%, #6C6F8E 52%, #D9A189 100%); }
.wake-lock, .wake-cam { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; transition: opacity .45s var(--ease-soft), transform .45s var(--ease-soft); }
.wake-lock { padding: 58px 14px 0; }
.wake-date { font: 500 15px var(--sans); color: rgba(255,255,255,.85); }
.wake-clock { font: 600 82px/1 var(--sans); letter-spacing: -0.04em; color: rgba(255,255,255,.95); font-variant-numeric: tabular-nums; }
.wake-alert { width: 100%; margin-top: auto; margin-bottom: 64px; padding: 16px; border-radius: 26px; background: rgba(30,32,40,.55); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.wake-title { margin-top: 8px; font: 600 26px var(--sans); color: #fff; }
.wake .alarm-actions { margin-top: 14px; }
.wake .alarm-btn { height: 42px; font-size: 14px; }
.wake[data-state="alarm"] .alarm-bell { animation: ring-bell 2.4s ease-in-out .3s infinite; }
/* The photo task opens as Daraja's forest sheet: Cancel, the prompt, the viewfinder and Capture & confirm. */
.wake-cam { padding-top: 46px; background: #050706; opacity: 0; transform: translateY(24px); }
.wake .ios-status { z-index: 2; }
.wake:not([data-state="alarm"]) .wake-lock { opacity: 0; transform: scale(.96); }
.wake:not([data-state="alarm"]) .wake-cam { opacity: 1; transform: none; }
.wake-sheet { display: flex; flex-direction: column; flex: 1; width: 100%; padding: 0 16px 30px; border-radius: 26px 26px 0 0; background: #103C26; color: #FFF4DF; }
.wake-nav { position: relative; display: grid; place-items: center; height: 44px; font: 600 14px var(--sans); }
.wake-nav span { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-weight: 400; color: #E6C88F; }
.wake-prompt { margin: 4px 0 12px; font: 400 12.5px/1.4 var(--sans); color: rgba(255,244,223,.72); }
.wake-view { position: relative; flex: 1; overflow: hidden; border-radius: 18px; background: rgba(0,0,0,.35); }
.wake-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wake-checking { display: grid; justify-items: center; gap: 6px; height: 46px; margin-top: 12px; font: 400 12px var(--sans); color: rgba(255,244,223,.72); opacity: 0; transition: opacity .3s; }
.wake[data-state="check"] .wake-checking { opacity: 1; }
.wake-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,244,223,.25); border-top-color: rgba(255,244,223,.85); }
.wake[data-state="check"] .wake-spin { animation: wake-spin .8s linear infinite; }
@keyframes wake-spin { to { transform: rotate(360deg); } }
.wake-capture { display: grid; place-items: center; height: 44px; margin-top: 8px; border-radius: 14px; background: #245E3D; font: 600 14px var(--sans); color: #FFF8EC; transition: opacity .3s; }
.wake[data-state="check"] .wake-capture { opacity: .45; }
.masjid-list { width: min(100%, 400px); }
.masjid-list ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.masjid-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--border); }
.masjid-list li:first-child { border-top: 0; }
.masjid-list .i { font-size: 22px; color: var(--accent-text); }
.masjid-list b { display: block; font: 500 17px/1.2 var(--serif); color: var(--ink); }
.masjid-list small { font-size: 13px; color: var(--muted); }
.masjid-list .i-go { font-size: 16px; color: var(--muted); }

/* Activity panel */
.stats { padding: 20px 20px 18px; }
.stats-head { display: flex; justify-content: space-between; align-items: baseline; }
.stats-period { font-size: 13px; color: var(--muted); }
.heatmap { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; margin-top: 14px; aspect-ratio: 26 / 7; }
.heatmap i { border-radius: 3px; background: var(--forest); opacity: var(--o, .08); transform: scale(.4); transition: transform .4s var(--spring), opacity .4s; }
.panel.is-active .heatmap i { transform: none; transition-delay: calc(var(--c) * 18ms); }
.heat-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 10px; font-size: 11px; color: var(--muted); }
.heat-legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--forest); }
.heat-legend i:nth-of-type(1) { opacity: .12; } .heat-legend i:nth-of-type(2) { opacity: .35; }
.heat-legend i:nth-of-type(3) { opacity: .6; } .heat-legend i:nth-of-type(4) { opacity: .9; }
.heat-legend span { margin: 0 4px; }
.stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.stat { padding: 14px; border-radius: 16px; background: var(--canvas); box-shadow: 0 0 0 1px var(--border) inset; }
.stat b { display: block; font: 400 34px/1 var(--serif); color: var(--heading); font-variant-numeric: tabular-nums; }
.stat:first-child b::after { content: "%"; font-size: .55em; margin-left: 2px; }
.stat span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--muted); }

/* Section illustrations from the app */
.section-art { display: block; width: 104px; height: auto; margin-bottom: 18px; filter: drop-shadow(0 10px 18px rgba(16,60,38,.14)); }
.card-art { display: block; width: 120px; height: auto; margin: -6px auto 10px; }
.card-art.rug { width: 104px; transform: rotate(-6deg); }

/* Places prayed map */
/* Weekly reflection: lesson, your reflection, then the shared feed */
.weekly { padding: var(--section-y) var(--gutter) 0; }
.weekly-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.weekly h2 { margin-top: 14px; font-size: clamp(34px, 4.6vw, 52px); line-height: 1.06; color: var(--heading); }
.weekly-copy > p:not(.overline) { margin-top: 16px; font-size: 18px; color: var(--ink-soft); max-width: 40ch; }
.weekly-stage { display: grid; gap: 12px; justify-items: center; }
/* As in the day story, the app leads on the left and the words explain it on the right. */
.weekly-stage, .map-wrap { order: -1; }
.weekly-stage > .mock-card { width: min(100%, 440px); opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.weekly-stage .is-in { opacity: 1; transform: none; }
.wk-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.wk-head img { width: 84px; height: 84px; margin: -6px -6px 0 0; }
.wk-title { margin-top: 10px; font: 400 26px/1.15 var(--serif); color: var(--heading); }
.wk-window { margin-top: 8px; font-size: 13px; color: var(--muted); }
.wk-source { margin-top: 18px; padding: 16px 18px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--border) inset; }
.wk-arabic { font: 400 22px/1.9 var(--arabic); color: var(--heading); text-align: right; }
.wk-translation { margin-top: 8px; font: 400 16px/1.5 var(--serif); color: var(--ink); }
.wk-ref { margin-top: 10px; font-size: 12px; color: var(--muted); }
.wk-wisdom { margin-top: 16px; font-size: 15px; color: var(--ink-soft); }
.wk-question { margin-top: 16px; padding-left: 14px; border-left: 2px solid var(--gold); font: 400 19px/1.4 var(--serif); color: var(--heading); }
.wk-follow { margin-top: 10px; padding-left: 16px; font-size: 15px; color: var(--ink-soft); }

.places { padding: var(--section-y) var(--gutter) 0; }
.places-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.places h2 { margin-top: 14px; font-size: clamp(34px, 4.6vw, 52px); line-height: 1.06; color: var(--heading); }
.places-copy > p:not(.overline) { margin-top: 16px; font-size: 18px; color: var(--ink-soft); max-width: 40ch; }
.map { position: relative; aspect-ratio: 600 / 440; border-radius: var(--radius-xl); overflow: hidden; background: var(--map-bg); box-shadow: 0 0 0 1px var(--border) inset, 0 30px 60px -36px rgba(16,60,38,.45); }
.map-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pins { list-style: none; margin: 0; padding: 0; }
/* Markers follow the app's map: a forest balloon with a white masjid glyph, or a map pin for other places. */
.pins li { position: absolute; left: var(--x); top: var(--y); width: 32px; height: 40px; margin: -40px 0 0 -16px; opacity: 0; transform: translateY(-26px) scale(.6); transform-origin: 50% 100%; transition: opacity .25s, transform .5s var(--spring); }
.pins li.is-down { opacity: 1; transform: none; }
.pins li::before { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%23fff%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M12 3.2a1.6 1.6 0 0 0 .9 2.9 1.9 1.9 0 0 1-1.4-.6v1.2C9 7.6 7 9.6 7 12.6V13h10v-.4c0-3-2-5-4.5-5.9V5.5a1.6 1.6 0 1 0-.5-2.3zM6.3 14h11.4v6.5h-4.1v-3.1a1.6 1.6 0 0 0-3.2 0v3.1H6.3zM3.2 9.6 4 7.3l.8 2.3v10.9H3.2zM19.2 9.6l.8-2.3.8 2.3v10.9h-1.6z%22/%3E%3C/svg%3E") center / 19px no-repeat, radial-gradient(circle at 50% 30%, #2C6B45, #0F3A22); box-shadow: 0 0 0 2px #fff, 0 4px 10px -2px rgba(10,30,20,.45); }
.pins li::after { content: ""; position: absolute; left: 50%; top: 31px; width: 10px; height: 8px; margin-left: -5px; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.pins li:not(.masjid)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%23fff%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M12 3a5.5 5.5 0 0 0-1 10.9V21h2v-7.1A5.5 5.5 0 0 0 12 3zm0 3a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z%22/%3E%3C/svg%3E"), radial-gradient(circle at 50% 30%, #2C6B45, #0F3A22); background-size: 17px, auto; }
.pins li.is-picked { z-index: 2; transform: scale(1.35); }
.pins button { position: absolute; inset: -6px; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.pin-tip { position: absolute; left: var(--x, 50%); top: var(--y, 50%); z-index: 3; transform: translate(-50%, calc(-100% - 60px)) scale(.92); opacity: 0; pointer-events: none; padding: 9px 13px; border-radius: 12px; background: var(--card-hi); box-shadow: var(--shadow-card); white-space: nowrap; transition: opacity .2s, transform .3s var(--spring); }
.pin-tip.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 60px)); }
.pin-tip b { display: block; font: 500 15px/1.2 var(--serif); color: var(--ink); }
.pin-tip span { font-size: 12px; color: var(--muted); }
.map-hud { position: absolute; left: 16px; right: 16px; top: 16px; display: flex; justify-content: space-between; align-items: center; }
.map-count { padding: 8px 14px; border-radius: 999px; background: var(--glass); box-shadow: var(--shadow-card); font-size: 14px; color: var(--ink-soft); }
.map-count b { font: 500 20px/1 var(--serif); color: var(--heading); font-variant-numeric: tabular-nums; margin-right: 2px; }
.map-replay { border: 0; cursor: pointer; padding: 8px 14px; border-radius: 999px; background: var(--glass); box-shadow: var(--shadow-card); font: 500 13px var(--sans); color: var(--accent-text); }
.map-badge { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 18px; background: var(--glass); box-shadow: var(--shadow-card); opacity: 0; transform: translateY(14px) scale(.94); transition: opacity .4s, transform .6s var(--spring); }
.map-badge.is-on { opacity: 1; transform: none; }
/* The map credit sits in the corner, as on any map. */
.map-attrib { position: absolute; right: 10px; bottom: 8px; font-size: 10px; color: #6E6E73; text-shadow: 0 0 3px #FBF9F1, 0 0 3px #FBF9F1; pointer-events: none; }
.map-badge img { width: 52px; height: 52px; }
.map-badge.is-on img { animation: badge-glow 1.4s var(--ease-out) .2s; }
@keyframes badge-glow { 0% { transform: scale(.7) rotate(-8deg); filter: drop-shadow(0 0 0 rgba(230,200,143,0)); } 60% { transform: scale(1.08); filter: drop-shadow(0 0 14px rgba(230,200,143,.9)); } }
.map-badge b { display: block; font: 500 16px/1.2 var(--serif); color: var(--heading); }
.map-badge small { font-size: 12px; color: var(--muted); }

.step-feature .iphone { margin: 0; }

/* Prayer Focus: a real-proportioned iPhone home screen and Daraja's Screen Time shield */
.iphone { position: relative; width: min(100%, 280px); aspect-ratio: 1206 / 2622; padding: 9px; border-radius: 50px; background: linear-gradient(145deg, #2C302C, #0D0F0D); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 40px 80px -34px rgba(16,24,40,.6); }
.iphone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 42px; color: #fff;
  background: radial-gradient(120% 70% at 20% 10%, #6E8FB2 0%, transparent 60%), radial-gradient(110% 70% at 90% 100%, #D9A27F 0%, transparent 60%), linear-gradient(180deg, #4B6788, #8C7392 55%, #C58F7E); }
.ios-status { position: relative; display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 22px 0 28px; font: 600 14px var(--sans); }
.ios-island { position: absolute; left: 50%; top: 10px; width: 30%; height: 24px; margin-left: -15%; border-radius: 99px; background: #000; }
.ios-icons { display: inline-flex; align-items: center; gap: 4px; }
.ios-icons .g { width: 15px; height: 15px; }
.ios-battery { position: relative; width: 22px; height: 11px; border-radius: 3.5px; box-shadow: 0 0 0 1px rgba(255,255,255,.5); padding: 1.5px; }
.ios-battery i { display: block; height: 100%; width: 100%; border-radius: 2px; background: #fff; }
.g { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-grid { list-style: none; margin: 18px 0 0; padding: 0 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 12px; }
.app { display: grid; justify-items: center; gap: 5px; min-width: 0; }
.app-icon { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 23%; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: filter .5s var(--ease-soft), transform .4s var(--spring); }
.app-label { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; font: 500 10px var(--sans); text-shadow: 0 1px 3px rgba(0,0,0,.4); white-space: nowrap; }
/* Long names truncate like iOS instead of widening the grid past the screen. */
.app-label > span { overflow: hidden; text-overflow: ellipsis; }
.hg { width: 0; height: 9px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: 0; transition: width .3s, opacity .3s; }
.lg { width: 62%; height: 62%; fill: currentColor; }
.ic-instagram { background: radial-gradient(circle at 30% 107%, #FDD769 0%, #F58529 25%, #DD2A7B 55%, #8134AF 80%, #515BD4 100%); }
.ic-instagram .lg { width: 58%; height: 58%; }
.ic-youtube { background: #fff; color: #FF0000; }
.ic-youtube .lg { width: 66%; height: 66%; }
.ic-tiktok { background: #000; }
.ic-tiktok .lg { width: 56%; height: 56%; filter: drop-shadow(-1.2px -1px 0 #25F4EE) drop-shadow(1.2px 1px 0 #FE2C55); }
.ic-snapchat { background: #FFFC00; }
.ic-snapchat .lg { stroke: #000; stroke-width: 1.2; paint-order: stroke; }
.ic-camera { background: linear-gradient(180deg, #8A8F98, #5E636B); }
.ic-maps { background: linear-gradient(135deg, #7FD38B 0 50%, #4FA3F7 50%); }
.ic-notes { background: linear-gradient(180deg, #FFD54A 0 26%, #FFFDF6 26%); color: #B8A47A; }
.ic-clock { background: #111; }
.ic-x { background: #000; }
.ic-x .lg { width: 52%; height: 52%; }
.ic-facebook { background: #fff; color: #0866FF; }
.ic-facebook .lg { width: 70%; height: 70%; }
.ic-news { background: linear-gradient(180deg, #FF4D5E, #E8243A); }
.ic-photos { background: #fff; }
.ic-music { background: linear-gradient(180deg, #FF6A88, #F2385A); }
.ic-weather { background: linear-gradient(180deg, #4CA1FF, #2A6FE0); }
.ic-podcasts { background: linear-gradient(180deg, #C276F2, #8A3FD6); }
.ic-calendar { background: #fff; color: #111; align-content: center; gap: 0; }
.ic-calendar small { font: 600 7px var(--sans); color: #F2385A; letter-spacing: .04em; }
.ic-calendar b { font: 300 22px/1 var(--sans); }
.ic-photos .g { width: 72%; height: 72%; }
.ios-dock { position: absolute; left: 10px; right: 10px; bottom: 22px; list-style: none; margin: 0; padding: 12px 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; border-radius: 30px; background: rgba(255,255,255,.22); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.ic-phone { background: linear-gradient(180deg, #6BE27A, #2FBF4A); }
.ic-msg { background: linear-gradient(180deg, #6BE27A, #2FBF4A); }
.ic-web { background: #fff; color: #1E6FE8; }
.ic-daraja { background: none; overflow: hidden; }
.ic-daraja img { width: 100%; height: 100%; border-radius: inherit; }
.ios-home { position: absolute; left: 50%; bottom: 8px; width: 34%; height: 4px; margin-left: -17%; border-radius: 99px; background: rgba(255,255,255,.85); z-index: 4; }

/* Blocked: dimmed icons and the iOS hourglass beside the name */
.iphone:not([data-state="open"]):not([data-state="released"]) .blockable .app-icon { filter: grayscale(.85) brightness(.78); }
.iphone:not([data-state="open"]):not([data-state="released"]) .blockable .hg { width: 9px; opacity: 1; }
.iphone .blockable:nth-child(2) .app-icon, .iphone .blockable:nth-child(2) .hg { transition-delay: .06s; }
.iphone .blockable:nth-child(3) .app-icon, .iphone .blockable:nth-child(3) .hg { transition-delay: .12s; }
.iphone .blockable:nth-child(4) .app-icon, .iphone .blockable:nth-child(4) .hg { transition-delay: .18s; }
.iphone .blockable:nth-child(9) .app-icon, .iphone .blockable:nth-child(9) .hg { transition-delay: .24s; }
.iphone .blockable:nth-child(10) .app-icon, .iphone .blockable:nth-child(10) .hg { transition-delay: .3s; }

/* A finger tap */
.ios-tap { position: absolute; z-index: 5; width: 44px; height: 44px; margin: -22px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 2px rgba(255,255,255,.7); opacity: 0; transform: scale(.6); pointer-events: none; }
.ios-tap.is-on { animation: tap .6s var(--ease-out) both; }
@keyframes tap { 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }

/* Daraja's Screen Time shield (ShieldConfiguration in PrayerFocusShield.swift) */
.shield { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; padding: 0 22px 44px; background: #F6EFD9; color: #103C26; text-align: center; opacity: 0; transform: scale(.2); transform-origin: 22% 20%; pointer-events: none; transition: opacity .35s var(--ease-out), transform .5s var(--ease-io); }
.iphone[data-state="shield"] .shield { opacity: 1; transform: none; pointer-events: auto; }
.shield-body { display: grid; justify-items: center; gap: 10px; margin-top: 46%; }
.shield-dal { width: 52px; height: 52px; fill: #103C26; margin-bottom: 8px; }
.shield-body b { font: 600 19px/1.25 var(--sans); }
.shield-body span { font: 400 14px/1.4 var(--sans); color: rgba(16,60,38,.7); }
.shield-actions { display: grid; gap: 14px; }
.shield-primary { height: 50px; border: 0; border-radius: 14px; cursor: pointer; background: #103C26; color: #F6EFD9; font: 600 16px var(--sans); transition: transform .2s var(--spring), filter .2s; }
.shield-primary:hover { filter: brightness(1.15); }
.shield-primary:active { transform: scale(.97); }
.shield-secondary { font: 500 15px var(--sans); color: #103C26; }

/* Quran goal + tappable daily question */
.quran-goal { display: flex; align-items: center; gap: 18px; }
.goal-ring { position: relative; flex: none; width: 112px; height: 112px; display: grid; place-items: center; }
.goal-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.goal-ring circle { stroke-width: 2.6; }
.goal-ring .ring-fill { stroke: var(--gold); transition: stroke-dashoffset 1.6s var(--ease-out); }
.goal-ring img { width: 80px; height: 80px; }
.goal-text b { display: block; margin-top: 8px; font: 400 28px/1.1 var(--serif); color: var(--heading); font-variant-numeric: tabular-nums; }
.goal-text small { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }
.quiz-hint { float: right; font: 400 11px var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.answers { display: grid; gap: 8px; margin-top: 16px; }
.answers button {
  display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border: 0; border-radius: 14px; cursor: pointer; text-align: left;
  background: var(--canvas); font: 15px var(--sans); color: var(--ink); box-shadow: 0 0 0 1px var(--border) inset; transition: background .2s, box-shadow .2s, transform .2s var(--spring);
}
.answers button:hover:not(:disabled) { background: var(--tint); transform: translateX(2px); }
.answers button .i { opacity: 0; color: var(--accent-text); }
.answers button:disabled { cursor: default; }
.answers .is-right { background: var(--tint); box-shadow: 0 0 0 1.5px var(--accent) inset; color: var(--heading); font-weight: 500; animation: right-pop .5s var(--spring); }
.answers .is-right .i { opacity: 1; }
.answers .is-wrong { box-shadow: 0 0 0 1.5px #C98A6A inset; animation: shake .4s; }
@keyframes right-pop { 40% { transform: scale(1.03); } }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.quiz-feedback { min-height: 1.4em; margin-top: 12px; font: italic 15px/1.4 var(--serif); color: var(--ink-soft); }

/* Journey: locked milestone flips to earned */
.earn-card { width: min(100%, 300px); perspective: 900px; }
.earn-flip { position: relative; aspect-ratio: 1 / 1.08; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: transform 1s var(--ease-io); }
.earn-card.is-earned .earn-flip { transform: rotateY(180deg); }
.earn-face { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; border-radius: var(--radius-l); -webkit-backface-visibility: hidden; backface-visibility: hidden; text-align: center; }
.earn-face img { width: 62%; height: auto; }
.earn-locked { background: var(--surface); box-shadow: 0 0 0 1px var(--border) inset; color: var(--muted); font-size: 14px; }
.earn-locked img { filter: grayscale(1) opacity(.42); }
.earn-earned { transform: rotateY(180deg); background: radial-gradient(80% 60% at 50% 35%, #2A6B47, var(--forest-deep)); color: var(--ivory); box-shadow: 0 30px 50px -30px rgba(16,60,38,.7); }
.earn-earned img { filter: drop-shadow(0 0 22px rgba(230,200,143,.45)); }
.earn-earned b { font: 400 24px/1.1 var(--serif); }
.keepsake { padding: 3px 14px; border-top: 1px solid rgba(230,200,143,.6); border-bottom: 1px solid rgba(230,200,143,.6); font: italic 14px var(--serif); color: #F3E2BC; }
.panel .badges { grid-template-columns: repeat(3, 1fr); width: min(100%, 320px); }

/* Jumu'ah: Qibla compass */
.qibla-card { text-align: center; }
.compass { position: relative; width: 180px; height: 180px; margin: 4px auto 0; border-radius: 50%; background: radial-gradient(circle, var(--card-hi) 0 58%, var(--canvas) 59%); box-shadow: 0 0 0 1px var(--border) inset, 0 12px 30px -16px rgba(16,60,38,.4); }
.compass::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: repeating-conic-gradient(from -1deg, var(--border) 0 2deg, transparent 2deg 30deg); -webkit-mask: radial-gradient(circle, transparent 0 74%, #000 75%); mask: radial-gradient(circle, transparent 0 74%, #000 75%); }
.compass-n { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); font: 600 12px var(--sans); color: var(--muted); }
.compass-kaaba { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 3px; background: #1E1E1E; box-shadow: inset 0 3px 0 0 var(--gold); transform: rotate(48deg) translateY(-66px) rotate(-48deg); }
.compass-needle { position: absolute; left: 50%; top: 50%; width: 6px; height: 120px; margin: -60px 0 0 -3px; border-radius: 3px; background: linear-gradient(180deg, var(--accent) 0 50%, var(--border) 50%); transform: rotate(0deg); transition: transform .5s var(--ease-io); }
.compass-needle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--forest-deep); box-shadow: 0 0 0 3px var(--card-hi); }
.compass-label { margin-top: 14px; font: 400 18px var(--serif); color: var(--heading); }
.friday-pill { display: flex; align-items: center; gap: 12px; width: min(100%, 400px); padding: 14px 18px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow-card); }
.friday-pill .i { font-size: 22px; color: var(--accent-text); }
.friday-pill b { display: block; font: 500 16px/1.2 var(--serif); color: var(--ink); }
.friday-pill small { font-size: 13px; color: var(--muted); }
.panel.is-active .friday-pill { animation: panel-in .6s var(--ease-out) .2s both; }
.stats .card-art { margin-bottom: 4px; }


/* Features */
.features { padding: var(--section-y) var(--gutter) 0; max-width: 1120px; margin: 0 auto; }
.tabs {
  position: relative; display: flex; width: max-content; max-width: 100%; margin: 40px auto 0; padding: 5px;
  border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--border) inset;
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  padding: 10px 18px; border-radius: 999px; white-space: nowrap;
  font: 500 15px/1 var(--sans); color: var(--muted); transition: color .2s var(--ease-soft);
}
.tabs button[aria-selected="true"] { color: var(--action-text); }
.tabs button:not([aria-selected="true"]):hover { color: var(--ink); }
.tab-pill { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; border-radius: 999px; background: var(--accent); box-shadow: 0 4px 12px -4px rgba(16,60,38,.5); transition: transform .5s var(--ease-io), width .5s var(--ease-io); }

.panels { margin-top: 28px; }
.panel {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center;
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--radius-xl); background: var(--surface); box-shadow: 0 0 0 1px var(--border) inset;
  min-height: 460px;
}
.panel[hidden] { display: none; }
.panel.is-active { animation: panel-in .42s var(--ease-soft) both; }
.panel.is-active .panel-art > * { animation: panel-in .6s var(--ease-out) both; }
.panel.is-active .panel-art > *:nth-child(2) { animation-delay: .08s; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }
.panel h3 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.1; color: var(--heading); }
.panel-copy > p { margin-top: 14px; color: var(--ink-soft); }
.ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; font-size: 16px; }
.ticks li { display: flex; gap: 10px; align-items: center; }
.ticks .i { color: var(--action-text); background: var(--accent); border-radius: 50%; padding: 4px; width: 22px; height: 22px; stroke-width: 2.6; }
.panel-art { display: grid; gap: 14px; justify-items: center; }

.mock-card { position: relative; width: min(100%, 400px); padding: 22px 24px; border-radius: var(--radius-l); background: var(--card); box-shadow: var(--shadow-card); }
.mock-over { font: 600 12px/1 var(--rounded); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.mock-title { margin-top: 10px; font: 400 30px/1.1 var(--serif); color: var(--heading); }
.mock-title small { font: 15px var(--sans); color: var(--muted); margin-left: 6px; }
.mock-sub { margin-top: 8px; color: var(--muted); font-size: 15px; }
.mock-q { margin-top: 12px; font: 400 21px/1.3 var(--serif); color: var(--ink); }
.answers { display: grid; gap: 8px; margin-top: 16px; }

.journal img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; margin-bottom: 18px; }
.typing { margin-top: 14px; min-height: 3.2em; font: italic 17px/1.6 var(--serif); color: var(--ink-soft); }
.caret { display: inline-block; width: 1.5px; height: 1.1em; margin-left: 2px; vertical-align: -0.15em; background: var(--accent); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; width: min(100%, 440px); }
.badges figure { margin: 0; text-align: center; font: 13px/1.3 var(--serif); color: var(--ink-soft); }
.badges img { width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(16,60,38,.18)); transition: transform .4s var(--spring), filter .4s; }
.badges figure:hover img { transform: translateY(-6px) rotate(-3deg) scale(1.04); filter: drop-shadow(0 18px 20px rgba(16,60,38,.24)); }
.badges .locked img { filter: grayscale(1) opacity(.42); }
.badges .locked figcaption { color: var(--muted); }
.panel.is-active .badges figure { animation: badge-in .6s var(--spring) both; }
.panel.is-active .badges figure:nth-child(2) { animation-delay: .06s; }
.panel.is-active .badges figure:nth-child(3) { animation-delay: .12s; }
.panel.is-active .badges figure:nth-child(4) { animation-delay: .18s; }
.panel.is-active .badges figure:nth-child(5) { animation-delay: .24s; }
.panel.is-active .badges figure:nth-child(6) { animation-delay: .30s; }
@keyframes badge-in { from { opacity: 0; transform: scale(.8) translateY(12px); } }


/* Widgets: modelled on the native SwiftUI captures (design/widgets/2026-10-19-family-audit/native) */
.wgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: min(100%, 440px); }
.wg { position: relative; overflow: hidden; padding: 15px 16px; border-radius: 24px; background: #F6EFD9; color: #214A36; box-shadow: 0 1px 2px rgba(16,60,38,.08), 0 18px 34px -20px rgba(16,60,38,.45); }
.wg .i { font-size: 13px; stroke-width: 1.7; }
.wg-small { aspect-ratio: 1; display: flex; flex-direction: column; }
.wg-head { display: flex; justify-content: space-between; align-items: center; }
.wg-name { display: inline-flex; align-items: center; gap: 5px; font: 400 17px/1 var(--serif); }
.wg-frac { font-size: 11px; color: rgba(33,74,54,.72); }
.wg-time { margin-top: 6px; font: 700 30px/1 var(--rounded); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wg-time small { font-size: 13px; font-weight: 600; margin-left: 3px; letter-spacing: 0; }
.wg-in { margin-top: 4px; font: 500 11px var(--rounded); color: rgba(33,74,54,.72); font-variant-numeric: tabular-nums; }
.wg-in b { font-weight: 600; color: #214A36; }
.wg-rows { list-style: none; margin: auto 0 0; padding: 7px 0 0; border-top: 1px solid rgba(33,74,54,.14); display: grid; gap: 2px; font-size: 11px; }
.wg-rows li { display: flex; justify-content: space-between; }
.wg-rows li span:first-child { display: inline-flex; align-items: center; gap: 5px; }
.wg-rows .i { font-size: 11px; }
.wg-rows small { font-size: 8px; margin-left: 1px; }
.wg-lock { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 14px; border-radius: 24px; background: radial-gradient(120% 90% at 20% 0%, #3C5A73, #1B2534 70%); box-shadow: 0 18px 34px -20px rgba(16,24,40,.6); }
.wg-lock-label { font-size: 11px; color: rgba(255,255,255,.62); text-align: center; }
.wl { display: flex; align-items: stretch; gap: 6px; color: #fff; }
.wl-next { display: grid; gap: 1px; width: 70px; }
.wl-name { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; }
.wl-name .i { font-size: 10px; }
.wl-time { font: 500 24px/1 var(--rounded); font-variant-numeric: tabular-nums; }
.wl-in { font: 500 10px var(--rounded); color: rgba(255,255,255,.66); font-variant-numeric: tabular-nums; }
.wl-in b { font-weight: 500; color: #fff; }
.wl-rule { width: 1px; background: rgba(255,255,255,.4); }
.wl-later { list-style: none; margin: 0; padding: 0; display: grid; align-content: center; gap: 2px; flex: 1; font-size: 10px; }
.wl-later li { display: flex; justify-content: space-between; gap: 4px; }
.wg-medium { grid-column: 1 / -1; aspect-ratio: 338 / 158; display: flex; flex-direction: column; }
.wdal { position: absolute; right: -6%; bottom: -26%; width: 46%; fill: #214A36; opacity: .05; pointer-events: none; }
.wg-heading { font: 600 10px/1 var(--sans); letter-spacing: .12em; color: rgba(33,74,54,.72); }
.wg-progress { display: flex; align-items: baseline; gap: 7px; margin-top: 6px; }
.wg-progress b { font: 400 34px/1 var(--serif); font-variant-numeric: tabular-nums; }
.wg-progress span { font-size: 11px; line-height: 1.25; color: rgba(33,74,54,.72); }
.wg-bar { display: block; height: 3px; margin-top: 8px; border-radius: 99px; background: rgba(33,74,54,.1); overflow: hidden; }
.wg-bar i { display: block; height: 100%; width: 70%; border-radius: inherit; background: #214A36; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out) .3s; }
.panel.is-active .wg-bar i { transform: scaleX(1); }
.wg-sub { margin-top: 6px; font-size: 11px; color: rgba(33,74,54,.72); }
.wg-controls { display: flex; justify-content: space-between; align-items: center; margin-top: auto; font: 600 12px var(--sans); }
.wg-pill { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 999px; background: rgba(33,74,54,.08); }
.wg-link { display: inline-flex; align-items: center; gap: 5px; }
.wg-verse-body { display: flex; align-items: center; gap: 16px; margin: auto 0; }
.wg-translation { flex: 1; font: 400 16px/1.3 var(--serif); }
.wg-arabic { width: 106px; text-align: right; font: 400 22px/1.5 var(--arabic); }
.wg-verse-foot { display: flex; justify-content: space-between; align-items: center; }
.wg-verse-foot b { display: block; font-size: 10px; font-weight: 500; }
.wg-verse-foot small { font-size: 8px; color: rgba(33,74,54,.72); }
.wg-next { display: grid; place-items: center; width: 30px; height: 30px; }
.panel.is-active .wg, .panel.is-active .wg-lock { animation: badge-in .6s var(--spring) both; }
.panel.is-active .wgrid > :nth-child(2) { animation-delay: .07s; }
.panel.is-active .wgrid > :nth-child(3) { animation-delay: .14s; }
.panel.is-active .wgrid > :nth-child(4) { animation-delay: .21s; }

/* Pacts: highlighted band */
.pacts { padding: var(--section-y) var(--gutter) 0; }
.pacts-inner {
  max-width: 1200px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) clamp(22px, 5vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center;
  border-radius: var(--radius-xl);
  background: radial-gradient(90% 120% at 100% 0%, #F3E7C8 0%, rgba(243,231,200,0) 55%), linear-gradient(160deg, #E4EEE3, #F2F0E6);
  box-shadow: 0 0 0 1px rgba(201,169,97,.25) inset;
}
.pacts h2 { margin-top: 14px; font-size: clamp(36px, 5vw, 58px); line-height: 1.04; color: var(--heading); }
.pacts-copy > p:not(.overline) { margin-top: 16px; font-size: 18px; color: var(--ink-soft); max-width: 42ch; }
.pacts .ticks { margin-top: 22px; }
.pact-board { width: min(100%, 460px); justify-self: center; padding: 26px; border-radius: var(--radius-l); background: var(--card); box-shadow: 0 30px 60px -30px rgba(16,60,38,.35), 0 0 0 1px var(--border) inset; }
.pact-head { display: flex; justify-content: space-between; align-items: baseline; }
.pact-round { font-size: 13px; color: var(--muted); }
.pact-members { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0 22px; text-align: center; font-size: 13px; color: var(--ink-soft); }
.m-ring { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 8px; }
.m-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.m-ring circle { stroke-width: 3; }
.m-ring .ring-fill { stroke: var(--accent); transition-duration: 1.8s; }
.member:first-child .m-ring .ring-fill { stroke: var(--gold); }
.m-ring b { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--heading); font: 500 17px var(--serif); }
.bar-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--ink-soft); }
.bar-row b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.bar { height: 10px; margin-top: 8px; border-radius: 99px; background: var(--canvas); box-shadow: 0 0 0 1px var(--border) inset; overflow: hidden; }
.bar i.w86 { --w: 86%; }
.bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--forest), #3E7A57); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-out) .5s; }
.pact-board.is-in .bar i { transform: scaleX(1); }
.pact-reflect { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 14px 16px; border-radius: 18px; background: var(--canvas); box-shadow: 0 0 0 1px var(--border) inset; }
.pact-reflect img { width: 40px; height: 40px; flex: none; }
.pact-reflect b { display: block; margin-top: 4px; font: 500 17px/1.2 var(--serif); color: var(--ink); }
.pact-recap { margin-top: 12px; padding: 14px 16px; border-radius: 18px; background: var(--forest-deep); color: var(--ivory); opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-out) 1.6s, transform .6s var(--spring) 1.6s; }
.pact-recap .mock-over { color: var(--champagne); }
.pact-recap b { display: block; margin-top: 6px; font: 400 18px/1.3 var(--serif); }
.pact-board.is-in .pact-recap { opacity: 1; transform: none; }

/* Privacy */
.privacy { padding: var(--section-y) var(--gutter) 0; }
.privacy-inner {
  max-width: 1280px; margin: 0 auto; padding: clamp(72px, 9vw, 120px) clamp(20px, 5vw, 64px);
  border-radius: var(--radius-xl);
  background: radial-gradient(120% 80% at 50% 0%, #1D5236 0%, var(--forest-deep) 55%, #0B2C1C 100%);
  color: var(--ivory);
}
.privacy .overline { color: var(--champagne); }
.privacy .section-head h2 { color: var(--ivory); }
.privacy-grid { max-width: 1000px; margin: 56px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.p-item { padding: 24px; border-radius: 22px; background: rgba(255,244,223,.05); box-shadow: 0 0 0 1px rgba(255,244,223,.1) inset; transition: background .3s, transform .3s var(--spring); }
.p-item:hover { background: rgba(255,244,223,.09); transform: translateY(-3px); }
.p-item .i { font-size: 26px; color: var(--champagne); }
.p-item h3 { margin-top: 18px; font-size: 21px; color: var(--ivory); }
.p-item p { margin-top: 8px; font-size: 15px; color: rgba(246,239,217,.84); }

/* Launch */
.launch { padding: var(--section-y) var(--gutter) 24px; max-width: 1280px; margin: 0 auto; }
.launch-card { position: relative; overflow: hidden; border-radius: var(--radius-xl); display: grid; isolation: isolate; background: radial-gradient(120% 90% at 85% 10%, #2A6B47 0%, var(--forest-deep) 55%, #0B2C1C 100%); }
.launch-card::before { content: ""; position: absolute; inset: auto -20% -60% 30%; height: 90%; z-index: -1; background: radial-gradient(closest-side, rgba(230,200,143,.28), rgba(230,200,143,0)); }
.launch-card { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); text-align: left; min-height: 620px; padding: 0 clamp(28px, 6vw, 88px); place-items: center start; }
.launch-copy { padding: 80px 0; color: var(--ivory); }
.launch-icon { border-radius: 18px; margin-bottom: 26px; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 14px 30px rgba(0,0,0,.35); }
.launch h2 { color: var(--ivory); margin-top: 0; }
.phone-launch { align-self: end; justify-self: center; width: min(290px, 62vw); margin: 56px 0 -170px; }
.launch-copy > p { margin-top: 12px; font-size: 19px; color: rgba(255,255,255,.85); }
.launch-actions { display: flex; align-items: center; gap: 24px; margin-top: 30px; flex-wrap: wrap; }
.launch-actions .btn { background: var(--ivory); color: var(--forest-deep); }
.launch-actions .btn:hover { background: var(--ivory-warm); }
.launch .store-badge img { height: 55px; }
.qr { margin: 0; display: flex; align-items: center; gap: 12px; }
.qr img { width: 84px; height: 84px; padding: 8px; border-radius: 14px; background: var(--card-hi); box-shadow: 0 10px 24px -8px rgba(0,0,0,.45); }
.is-ios .qr { display: none; }
.android-note { display: none; margin-top: 18px; max-width: 34ch; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.88); }
.is-android .android-note { display: block; }
.qr figcaption { max-width: 9em; font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.78); }

.footer { max-width: 1280px; margin: 0 auto; padding: 28px var(--gutter) 40px; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--muted); font-size: 14px; }
.footer-links { display: flex; gap: 22px; }
.footer-links a { transition: color .2s; }
.footer-links a:hover { color: var(--ink); }
.footer .brand { font-size: 18px; }
.footer .brand img { border-radius: 6px; }

/* Document pages (privacy) */
.doc-page .nav { position: sticky; }
.doc { max-width: 680px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) var(--gutter) 64px; }
.doc h1 { margin-top: 14px; font-size: clamp(36px, 5vw, 52px); line-height: 1.08; color: var(--heading); }
.doc-updated { margin-top: 12px; font-size: 14px; color: var(--muted); }
.doc-lede { margin-top: 28px; font: 400 21px/1.5 var(--serif); color: var(--ink); }
.doc section { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border); }
.doc h2 { font-size: 26px; line-height: 1.2; color: var(--heading); }
.doc section p { margin-top: 12px; color: var(--ink-soft); }
.doc-back { margin-top: 56px; }

/* Responsive */
@media (max-width: 900px) {
  .nav-links { display: none; }
  /* Chips sit in a row above the phone so they never cover its screen. */
  .hero-stage { display: flex; flex-direction: column; align-items: center; }
  .chips { order: -1; display: flex; justify-content: center; gap: 10px; width: calc(100vw - 2 * var(--gutter)); margin-bottom: 22px; }
  .chip { position: static; }
  .chip-c { display: none; }
  .day-grid { grid-template-columns: 1fr; gap: 0; }
  .steps { padding-bottom: 24vh; }
  /* On phones the two shades alternate down one continuous column. */
  .step { min-height: auto; display: flex; flex-direction: column; }
  .day .step-copy { padding: 48px 24px 32px; }
  .day .step-feature { padding: 32px 16px 48px; }
  /* On phones the clear glass covers everything and each prayer's words get a band of white frost. */
  .sky-glass .g1, .sky-glass .g2, .sky-glass .g3, .sky-glass .gt { display: none; }
  .step .step-feature { order: 0; }
  .day .step-copy { margin: 0 calc(-1 * var(--gutter)); padding-left: calc(24px + var(--gutter)); padding-right: calc(24px + var(--gutter)); background: rgba(var(--frost), .56); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); }
  .day.is-dusk .step-copy { background: rgba(var(--frost), .72); }
  .day .step-copy { -webkit-mask-image: linear-gradient(transparent, #000 64px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(transparent, #000 64px, #000 calc(100% - 64px), transparent); padding-top: 72px; padding-bottom: 72px; }
  .step-feature { justify-items: center; }
  .step-copy { text-align: center; }
  .step-copy > p:not(.step-time) { margin-left: auto; margin-right: auto; }
  .step-icon { display: none; }
  .step-time { margin-top: 0; }
  .panel { grid-template-columns: 1fr; min-height: 0; text-align: left; }
  .panel-art { order: -1; }
  .tabs { margin-left: 0; margin-right: 0; width: auto; }
  .pacts-inner { grid-template-columns: minmax(0, 1fr); }
  .places-inner { grid-template-columns: 1fr; }
  .weekly-inner { grid-template-columns: minmax(0, 1fr); }
  .weekly-stage, .map-wrap { order: 0; }
  .privacy-grid { grid-template-columns: 1fr 1fr; }
  .launch-card { grid-template-columns: 1fr; text-align: center; place-items: center; min-height: 0; }
  .launch-copy { padding: 64px 0 0; }
  .launch-icon { margin-left: auto; margin-right: auto; }
  .phone-launch { margin-bottom: -240px; }
  .launch-actions { justify-content: center; }
}
@media (max-width: 700px) {
  .hero-copy { padding-top: 104px; }
  .qr { display: none; }
}
@media (max-width: 560px) {
  :root { --section-y: 56px; }
  .map { aspect-ratio: 1 / 1.2; background: #FBF9F1; }
  .map-art { height: calc(100% - 78px); }
  .map-badge { left: 10px; bottom: 10px; gap: 8px; padding: 7px 12px 7px 7px; }
  .map-badge img { width: 38px; height: 38px; }
  .map-badge b { font-size: 14px; }
  .map-badge small { font-size: 11px; }
  .map-hud { left: 10px; right: 10px; top: 10px; }
  .map-attrib { bottom: 84px; }
  body { font-size: 16px; }
  .chip { padding: 8px 12px 8px 8px; }
  .chip-orb, .chip-icon, .chip-ring { width: 28px; height: 28px; }
  .chip b { font-size: 13px; }
  .chip small { font-size: 11px; }
  .privacy-grid { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .p-item { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; padding: 16px 0; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid rgba(255,244,223,.12); }
  .p-item:hover { background: none; transform: none; }
  .p-item .i { grid-row: span 2; margin-top: 2px; }
  .p-item h3 { margin-top: 0; font-size: 19px; }
  .p-item p { margin-top: 4px; }
  .panel { padding: 22px 18px; border-radius: 28px; }
  .wgrid { grid-template-columns: 1fr; justify-items: center; }
  .wg-small { width: 190px; }
  .wg-lock { width: 100%; }
  .wg-medium { width: 100%; }
  .tabs button { padding: 10px 14px; font-size: 14px; }
  .footer { flex-direction: column; gap: 12px; text-align: center; }
  .footer-name { justify-items: center; }
  /* The pact card sits inside the pact panel, so both trim their padding to give four members room. */
  .pacts { padding-left: 12px; padding-right: 12px; }
  .pacts-inner { padding: 40px 18px 22px; }
  .pact-board { padding: 20px 16px; }
  .pact-members { gap: 4px; }
  .m-ring { width: 56px; height: 56px; }
  .m-ring b { width: 40px; height: 40px; font-size: 16px; }
  .pact-reflect { padding: 12px 14px; }
  .pact-reflect .mock-over { letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; filter: none; transform: none; }
}