/* getahsan.com, rebuilt on 28 October 2026 (Imtiaz: "massive overhauls ... tons of empty spaces"; use the films; speak to
   the people who run the mosque). One idea carries the design: the office's own artefacts. The count sheet that locks
   with two signatures is the home page's one live thing, the films of the real product sit in plain frames with the
   brand's arch behind them, and the brand's deep green and gold do the rest. Oxanium throughout; light by default and
   dark when the visitor's device asks for it; sections full and close together, no half-empty rows. */
@font-face { font-family: "Oxanium"; src: url("fonts/oxanium-wght.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --paper: #f3f7f4; --sheet: #ffffff; --tint: #e7f0eb; --tint-2: #d9e8df;
  --ink: #10241b; --ink-2: #3c5047; --ink-3: #56685f;
  --line: rgba(16, 36, 27, 0.12); --line-2: rgba(16, 36, 27, 0.22);
  --green: #1f4d3b; --green-2: #173b2d; --green-deep: #12372b; --on-green: #ffffff; --link: #0d6b58;
  --gold: #f0b53d; --gold-soft: #fbedc9; --gold-ink: #7a5200;
  --shadow: 0 1px 2px rgba(16, 36, 27, 0.07), 0 22px 44px -26px rgba(16, 36, 27, 0.42);
  --r-s: 10px; --r: 16px; --r-l: 26px;
  --max: 1200px; --gutter: clamp(20px, 4vw, 40px); --gap: clamp(28px, 4vw, 56px);
  --sec: clamp(56px, 7vw, 92px);
  --font: "Oxanium", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
/* light by default whatever the device says (Imtiaz, 28 October, memory #3993); dark when the visitor picks it */
:root[data-theme="dark"] {
  --paper: #0b110e; --sheet: #131b17; --tint: #16221c; --tint-2: #1c2b24;
  --ink: #e8efea; --ink-2: #a9b6af; --ink-3: #8d9a93;
  --line: rgba(232, 239, 234, 0.1); --line-2: rgba(232, 239, 234, 0.2);
  --green: #7fcfa5; --green-2: #95dab5; --green-deep: #0e271f; --on-green: #07120d; --link: #6fd3aa;
  --gold: #f0b53d; --gold-soft: #3a2f16; --gold-ink: #f3c768;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 24px 52px -26px rgba(0, 0, 0, 0.9);
  color-scheme: dark;
}

/* ---- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.6; font-weight: 420; font-variant-numeric: tabular-nums; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 2.9vw, 2.5rem); font-weight: 660; }
h3 { font-size: 1.22rem; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.narrow { max-width: 780px; }
.center { text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 40; background: var(--sheet); color: var(--ink); padding: 10px 14px; border-radius: var(--r-s); }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 6px; }
.for-dark { display: none; }
[data-theme="dark"] .for-dark { display: block; } [data-theme="dark"] .for-light { display: none; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.28rem); color: var(--ink-2); max-width: 58ch; }
.muted { color: var(--ink-3); }
.small { font-size: 0.93rem; }

/* ---- the logo */
.logo { display: block; height: 30px; width: auto; }
.logo .lg-arch { fill: #0d6b58; } .logo .lg-win { fill: #f0b53d; } .logo .lg-ink { fill: #101c17; }
[data-theme="dark"] .logo .lg-arch { fill: #3cc195; } [data-theme="dark"] .logo .lg-ink { fill: #f4f2ec; }

/* ---- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: 12px; font: inherit; font-weight: 640; font-size: 1rem; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--green); color: var(--on-green); }
.btn-primary:hover { background: var(--green-2); }
.btn-quiet { background: var(--sheet); color: var(--ink); border-color: var(--line-2); }
.btn-quiet:hover { border-color: var(--ink-3); }
.btn-gold { background: var(--gold); color: #1d1400; }
.btn-gold:hover { background: #f5c45f; }
.btn-sm { min-height: 40px; padding: 8px 15px; font-size: 0.94rem; border-radius: 10px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.actions.center { justify-content: center; }
.reassure { margin: 14px 0 0; font-size: 0.94rem; color: var(--ink-3); }
.more { font-weight: 640; text-decoration: none; }
.more::after { content: ""; display: inline-block; width: 0.45em; height: 0.45em; margin-left: 0.45em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg) translateY(-1px); }

/* ---- the launch bar and the header */
.launchbar { background: var(--green-deep); color: #e9f3ee; font-size: 0.95rem; }
.launchbar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; min-height: 44px; padding: 6px 0; text-align: center; }
.launchbar p { margin: 0; }
.launchbar a { color: var(--gold); font-weight: 650; }
.launchbar .lb-short { display: none; }
@media (max-width: 520px) { .launchbar { font-size: 0.9rem; } .launchbar .container { gap: 4px 12px; } .launchbar .lb-full { display: none; } .launchbar .lb-short { display: inline; } }
.site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 70px; }
.menu { display: flex; align-items: center; gap: 4px; }
.menu > a:not(.btn), .menu-top { color: var(--ink-2); text-decoration: none; font-weight: 580; font-size: 0.98rem; padding: 9px 12px; border-radius: 10px; }
.menu > a:not(.btn):hover, .menu-top:hover, .menu [aria-current="page"]:not(.btn) { color: var(--ink); background: var(--tint); }
.menu .btn { margin-left: 8px; }
.menu-group { position: relative; }
.sub { list-style: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 270px; padding: 8px; background: var(--sheet); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; }
.menu-group:hover .sub, .menu-group:focus-within .sub, .menu-group.open .sub { opacity: 1; visibility: visible; transform: none; }
.sub a { display: grid; gap: 1px; padding: 10px 12px; border-radius: 9px; color: var(--ink); text-decoration: none; font-weight: 600; }
.sub a span { font-weight: 420; font-size: 0.88rem; color: var(--ink-3); }
.sub a:hover, .sub a[aria-current="page"] { background: var(--tint); }
.menu-btn { display: none; background: none; border: 1.5px solid var(--line-2); border-radius: 10px; width: 46px; height: 46px; color: var(--ink); cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; margin: auto; }
@media (max-width: 940px) {
  .menu-btn { display: grid; place-items: center; }
  .menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px var(--gutter) 22px; background: var(--paper); border-bottom: 1px solid var(--line); display: none; }
  .menu.open { display: flex; }
  .menu .btn { margin: 10px 0 0; }
  .sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding: 0 0 6px 10px; min-width: 0; background: none; }
}

/* ---- sections */
.section { padding: var(--sec) 0; }
.section + .section { padding-top: 0; }
.section-head { max-width: 760px; margin: 0 0 36px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--ink-2); font-size: 1.1rem; margin: 0; }
.band { background: var(--green-deep); color: #e8f2ec; padding: var(--sec) 0; }
.band + .section { padding-top: var(--sec); }
.band h2, .band h3 { color: #ffffff; }
.band p { color: #c8dbd1; }
.band a:not(.btn) { color: var(--gold); }
.band .btn-quiet { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, 0.4); }
.tinted { background: var(--tint); padding: var(--sec) 0; }
.tinted + .section { padding-top: var(--sec); }

/* ---- the hero */
.hero { padding: clamp(40px, 6vw, 76px) 0 clamp(48px, 6vw, 80px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: var(--gap); align-items: center; }
.hero h1 { max-width: 19ch; font-size: clamp(2.2rem, 3.9vw, 3.2rem); }
.hero .lede { margin-bottom: 0; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } .hero h1 { max-width: 20ch; } }
.page-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(36px, 5vw, 60px); }
.page-hero .hero-grid { align-items: center; }
.crumbs { margin-bottom: 14px; font-size: 0.95rem; }
.crumbs a { text-decoration: none; font-weight: 620; }
.kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 13px 6px 10px; border-radius: 999px; background: var(--tint); color: var(--link); font-weight: 640; font-size: 0.94rem; }
.kicker .ic { width: 18px; height: 18px; }

/* ---- the count sheet, the home page's live thing: two people sign and the count locks */
.countsheet { position: relative; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow); padding: clamp(20px, 3vw, 30px); max-width: 520px; margin-inline: auto; width: 100%; }
.cs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.cs-head h2 { font-size: 1.15rem; margin: 0; letter-spacing: -0.01em; }
.cs-head span { color: var(--ink-3); font-size: 0.9rem; }
.cs-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.cs-table th, .cs-table td { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 450; }
.cs-table td:last-child, .cs-table th:last-child { text-align: right; }
.cs-table tfoot td { border-bottom: none; font-weight: 700; font-size: 1.1rem; padding-top: 12px; }
.cs-table .amount { font-weight: 620; }
.cs-table .amount button { font: inherit; color: inherit; background: none; border: none; border-bottom: 1.5px dashed var(--line-2); padding: 0 0 1px; cursor: pointer; }
.cs-table .amount button:hover { border-bottom-color: var(--link); color: var(--link); }
.cs-table del { color: var(--ink-3); font-weight: 450; margin-right: 8px; }
.cs-signs { list-style: none; display: grid; gap: 8px; margin: 16px 0 0; }
.cs-signs li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--tint); font-size: 0.95rem; }
.cs-signs li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--green); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 1 0 0 20A10 10 0 0 0 10 0Zm4.4 7.3-5 5.4a.9.9 0 0 1-1.3 0L5.6 10a.9.9 0 1 1 1.3-1.3l1.9 1.9 4.3-4.6a.9.9 0 1 1 1.3 1.3Z'/%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 20 20'%3E%3Cpath d='M10 0a10 10 0 1 0 0 20A10 10 0 0 0 10 0Zm4.4 7.3-5 5.4a.9.9 0 0 1-1.3 0L5.6 10a.9.9 0 1 1 1.3-1.3l1.9 1.9 4.3-4.6a.9.9 0 1 1 1.3 1.3Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.cs-signs li.waiting { background: transparent; border: 1.5px dashed var(--line-2); color: var(--ink-3); }
.cs-signs li.waiting::before { background: var(--line-2); }
.cs-state { margin: 14px 0 0; font-weight: 600; }
.cs-seal { position: absolute; right: clamp(14px, 3vw, 26px); top: clamp(-18px, -1vw, -10px); display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; background: var(--gold); color: #1d1400; font-weight: 750; font-size: 0.82rem; line-height: 1.1; text-align: center; box-shadow: 0 10px 24px -12px rgba(122, 82, 0, 0.7); transform: rotate(-8deg); }
.cs-seal[hidden] { display: none; }
.cs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.cs-fix { margin-top: 14px; padding: 14px; border-radius: 14px; border: 1.5px solid var(--gold); background: var(--gold-soft); display: grid; gap: 10px; }
.cs-fix label { display: grid; gap: 4px; font-size: 0.92rem; color: var(--ink-2); }
.cs-fix input { font: inherit; color: var(--ink); background: var(--sheet); border: 1.5px solid var(--line-2); border-radius: 10px; padding: 9px 11px; }
.cs-history { list-style: none; margin: 12px 0 0; display: grid; gap: 6px; font-size: 0.92rem; color: var(--ink-2); }
.cs-history li { padding-left: 14px; border-left: 3px solid var(--gold); }
.cs-note { margin: 12px 0 0; font-size: 0.88rem; color: var(--ink-3); }
@media (prefers-reduced-motion: no-preference) {
  .cs-seal.stamp { animation: stamp 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
  @keyframes stamp { from { opacity: 0; transform: rotate(-24deg) scale(1.6); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
  .cs-signs li.arrive { animation: arrive 0.35s ease both; }
  @keyframes arrive { from { opacity: 0; transform: translateY(6px); } }
}

/* ---- films and screens: plain frames, with the brand's arch behind */
.media { position: relative; isolation: isolate; }
.media .arch { position: absolute; z-index: -1; width: 74%; height: auto; left: 13%; top: -7%; color: var(--tint-2); }
.media.gold .arch { color: var(--gold-soft); }
.band .media .arch { color: rgba(255, 255, 255, 0.07); }
.film { margin: 0; position: relative; border-radius: var(--r); overflow: hidden; background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow); }
.film video, .film img { width: 100%; height: 100%; object-fit: cover; }
.film-4x5 { aspect-ratio: 4 / 5; max-width: 470px; margin-inline: auto; }
.film-16x9 { aspect-ratio: 16 / 9; }
.film .play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(to top, rgba(8, 20, 15, 0.38), rgba(8, 20, 15, 0)); border: none; cursor: pointer; color: #fff; font: inherit; }
.film .play span { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: rgba(8, 20, 15, 0.72); font-weight: 650; }
.film .play span::before { content: ""; width: 0; height: 0; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.film.playing .play { display: none; }
.film figcaption { position: absolute; left: 12px; bottom: 12px; right: 12px; }
.shot { margin: 0; position: relative; background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; border-radius: 14px; }
.shot .bar { display: flex; gap: 6px; padding: 10px 12px; background: var(--tint); border-bottom: 1px solid var(--line); }
.shot .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.shot-phone { border-radius: 30px; border: 6px solid #121a16; max-width: 300px; margin-inline: auto; }
[data-theme="dark"] .shot-phone { border-color: #27312c; }
.shot-tv { border-radius: 10px; border: 8px solid #121a16; }

/* ---- rows: words beside a film, the sides alternating */
.rows { display: grid; gap: clamp(56px, 7vw, 96px); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: center; }
.row.flip .row-text { order: 2; }
.row-text h3 { font-size: clamp(1.45rem, 2.2vw, 1.9rem); font-weight: 660; letter-spacing: -0.02em; }
.row-text > p { color: var(--ink-2); font-size: 1.07rem; }
.row-for { display: inline-block; margin: 0 0 12px; font-weight: 640; color: var(--link); font-size: 0.95rem; }
@media (max-width: 900px) { .row { grid-template-columns: 1fr; } .row.flip .row-text { order: 0; } }
.ticks { list-style: none; display: grid; gap: 10px; margin: 18px 0 0; }
.ticks li { position: relative; padding-left: 30px; }
.ticks + p { margin-top: 20px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.25em; width: 19px; height: 19px; border-radius: 50%; background: var(--tint-2); }
.ticks li::after { content: ""; position: absolute; left: 6.5px; top: 0.5em; width: 6px; height: 9px; border-right: 2px solid var(--link); border-bottom: 2px solid var(--link); transform: rotate(45deg); }

/* ---- the tour: one wide film on the deep green band */
.tour { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--gap); align-items: center; }
@media (max-width: 900px) { .tour { grid-template-columns: 1fr; } }

/* ---- the five parts, as a run of columns with rules between (not a grid of cards) */
.parts { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.parts li { border-left: 1px solid var(--line); }
.parts li:first-child { border-left: none; }
.parts a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px 20px 22px; color: var(--ink); text-decoration: none; transition: background-color 0.15s ease; }
.parts a:hover { background: var(--tint); }
.parts .ic { width: 30px; height: 30px; color: var(--link); }
.parts h3 { margin: 6px 0 0; font-size: 1.12rem; }
.parts p { margin: 0; color: var(--ink-2); font-size: 0.97rem; }
.parts .more { margin-top: auto; padding-top: 8px; color: var(--link); font-size: 0.94rem; }
@media (max-width: 1080px) { .parts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .parts li:nth-child(4) { border-left: none; } .parts li:nth-child(n+4) { border-top: 1px solid var(--line); } }
@media (max-width: 640px) { .parts { grid-template-columns: 1fr; } .parts li { border-left: none; border-top: 1px solid var(--line); } .parts li:first-child { border-top: none; } }

/* ---- who it's for: the people who run the mosque */
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.person { padding: 24px 22px; border-radius: var(--r); background: var(--sheet); border: 1px solid var(--line); }
.person h3 { font-size: 1.12rem; margin-bottom: 10px; }
.person ul { list-style: none; display: grid; gap: 8px; color: var(--ink-2); font-size: 0.97rem; }
.person li { padding-left: 16px; position: relative; }
.person li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 2px; background: var(--gold); }
.person .more { display: inline-block; margin-top: 14px; font-size: 0.94rem; }
.people.stand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* the people cards share their rows, so every title, list and link starts level whichever title wraps */
@supports (grid-template-rows: subgrid) {
  .people:not(.stand) > .person { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .people:not(.stand) > .person .more { justify-self: start; align-self: start; }
}
@media (max-width: 1080px) { .people, .people.stand { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .people, .people.stand { grid-template-columns: 1fr; } }

/* ---- facts set large (only real numbers: what the product does) */
.facts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.facts li { padding: 18px 0 0; border-top: 2px solid var(--gold); }
.facts b { display: block; font-size: 1.15rem; font-weight: 680; margin-bottom: 4px; }
.facts span { color: var(--ink-2); font-size: 0.96rem; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; } }

/* ---- how to start: a real sequence, so it's numbered */
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.steps li { counter-increment: step; position: relative; padding: 26px 24px; border-radius: var(--r); background: var(--sheet); border: 1px solid var(--line); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 14px; border-radius: 50%; background: var(--green); color: var(--on-green); font-weight: 700; }
.steps h3 { font-size: 1.12rem; }
.steps p { color: var(--ink-2); margin: 0; font-size: 0.98rem; }
.steps .more { display: inline-block; margin-top: 12px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ---- the Founding Mosque programme, set in gold */
.founding { border-radius: var(--r-l); background: var(--gold-soft); border: 1.5px solid color-mix(in srgb, var(--gold) 55%, transparent); padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--gap); align-items: center; }
.founding h2 { margin-bottom: 12px; }
.founding p { color: var(--ink-2); }
.founding ul { list-style: none; display: grid; gap: 12px; }
.founding li { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--sheet); }
.founding li b { font-weight: 660; }
.founding li span { color: var(--ink-2); font-size: 0.96rem; }
@media (max-width: 900px) { .founding { grid-template-columns: 1fr; } }

/* ---- cards (the guides and the other parts) */
.cards { list-style: none; display: grid; gap: 18px; }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); }
.card p { color: var(--ink-2); margin: 0; font-size: 0.98rem; }
.card h3 { margin: 4px 0 0; }
.card .for { font-size: 0.88rem; font-weight: 620; color: var(--link); }
.card .more { margin-top: auto; padding-top: 10px; font-size: 0.95rem; color: var(--link); }
.card-link { text-decoration: none; transition: border-color 0.15s ease, background-color 0.15s ease; }
.card-link:hover { border-color: var(--line-2); background: var(--tint); }
@media (max-width: 860px) { .cards-2, .cards-3 { grid-template-columns: 1fr; } }
.ic { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---- questions */
.faq { max-width: 820px; }
.faq h2 { margin-bottom: 20px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; padding: 18px 44px 18px 0; position: relative; font-weight: 640; font-size: 1.07rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease; }
.faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq-item p { color: var(--ink-2); padding: 0 0 18px; margin: 0; max-width: 70ch; }
.qa { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--gap); }
@media (max-width: 900px) { .qa { grid-template-columns: 1fr; } }
/* on wide screens the questions' heading stays beside them as they scroll past */
@media (min-width: 901px) { .qa > :first-child { position: sticky; top: 104px; align-self: start; } }

/* ---- forms: the launch email and the Founding Mosque application */
.form { display: grid; gap: 14px; padding: clamp(20px, 3vw, 30px); border-radius: var(--r-l); background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow); }
.form [data-fields] { display: grid; gap: 18px; }
.form .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; align-items: end; }
@media (max-width: 600px) { .form .two { grid-template-columns: 1fr; } }
.form label { display: grid; gap: 7px; font-weight: 600; font-size: 0.95rem; line-height: 1.35; }
.form label .opt, .form legend .opt { font-weight: 420; color: var(--ink-3); }
.form input, .form select, .form textarea { width: 100%; min-width: 0; font: inherit; font-weight: 450; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line-2); border-radius: 11px; padding: 11px 13px; min-height: 48px; }
.form textarea { min-height: 96px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 22%, transparent); }
.form .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 450; color: var(--ink-2); }
.form fieldset.moves { border: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.form fieldset.moves legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 0.95rem; }
@media (max-width: 600px) { .form fieldset.moves { grid-template-columns: 1fr; } }
.form .check input { min-height: 0; width: 20px; min-width: 20px; height: 20px; margin-top: 2px; accent-color: var(--green); }
.form .err { color: #b42318; font-weight: 500; font-size: 0.9rem; }
.form .err.wait { color: var(--ink-3); }
[data-theme="dark"] .form .err { color: #ff8a7a; }
.form .done { padding: 16px; border-radius: 14px; background: var(--tint); }
.form .done h3 { margin-bottom: 6px; }
.form .fine { font-size: 0.88rem; color: var(--ink-3); margin: 0; }
.form [hidden] { display: none; }

/* ---- the countdown on the launch page */
.countdown[hidden] { display: none; }
.countdown { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 8px; }
.countdown div { min-width: 96px; padding: 14px 16px 12px; border-radius: 16px; background: var(--sheet); border: 1px solid var(--line); text-align: center; }
.countdown b { display: block; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 720; line-height: 1; letter-spacing: -0.02em; }
.countdown span { font-size: 0.88rem; color: var(--ink-3); }

/* ---- the closing call */
.cta-band .container > div { padding: clamp(36px, 6vw, 60px) clamp(24px, 4vw, 56px); background: var(--tint); border-radius: var(--r-l); }
.cta-band h2 { margin-bottom: 10px; }
.cta-band p { color: var(--ink-2); max-width: 58ch; margin-inline: auto; }

/* ---- guides, the legal drafts and notes */
.note { padding: 14px 16px; border-radius: 12px; background: var(--tint); color: var(--ink-2); font-size: 0.97rem; }
.ph { background: rgba(240, 181, 61, 0.24); border-radius: 4px; padding: 0 3px; }
.for { color: var(--link); font-weight: 620; }
.prose { font-size: 1.07rem; }
.prose h2 { font-size: 1.55rem; margin-top: 1.7em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: 0.5em; }
.sources { font-size: 0.92rem; color: var(--ink-3); }
.guide-end { margin: 40px 0 80px; padding: 20px; border-radius: 14px; background: var(--tint); color: var(--ink-2); }
.container .faq { margin-top: 48px; }
.legal-meta { color: var(--ink-3); font-size: 0.95rem; }
.legal-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; padding-bottom: 80px; }
.legal-toc { position: sticky; top: 100px; align-self: start; font-size: 0.93rem; }
.legal-toc h2 { font-size: 1rem; }
.legal-toc ol { padding-left: 1.2em; display: grid; gap: 6px; }
@media (max-width: 900px) { .legal-grid { grid-template-columns: 1fr; } .legal-toc { position: static; } }
.draft-banner { background: rgba(240, 181, 61, 0.2); border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.draft-banner p { margin: 0; padding: 12px 0; }

/* ---- the prayer timetable maker */
.tt-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.tt-form { display: grid; gap: 16px; padding: 24px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); }
.tt-form fieldset { border: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tt-form legend { font-weight: 650; margin-bottom: 8px; }
.tt-form label { display: grid; gap: 6px; min-width: 0; font-size: 0.92rem; color: var(--ink-2); }
.tt-form label.full { grid-column: 1 / -1; }
.tt-form input, .tt-form select { width: 100%; min-width: 0; max-width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line-2); border-radius: 10px; padding: 10px 12px; }
.tt-notes { display: grid; gap: 12px; }
.tt-error { color: #b42318; }
.tt-out { margin-top: 32px; }
.tt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tt-sub, .tt-foot { color: var(--ink-3); font-size: 0.92rem; }
.tt-foot { margin-top: 16px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); margin-top: 14px; }
.tt-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tt-table th, .tt-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tt-table th { font-weight: 640; background: var(--tint); }
@media (max-width: 900px) { .tt-grid { grid-template-columns: 1fr; } }
@media print { .site-header, .launchbar, .site-footer, .tt-form, .tt-notes, .page-hero, .section:not(.tt-section), .tt-head button { display: none !important; } }

/* ---- the footer */
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 28px; margin-top: 24px; font-size: 0.95rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 28px; }
.foot-brand p { color: var(--ink-2); margin-top: 14px; max-width: 30ch; }
.site-footer h2 { font-size: 0.97rem; font-weight: 660; margin-bottom: 12px; }
.site-footer ul { list-style: none; display: grid; gap: 8px; }
.site-footer a:not(.brand) { color: var(--ink-2); text-decoration: none; }
.site-footer a:not(.brand):hover { color: var(--ink); text-decoration: underline; }
.foot-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 0.88rem; }
.foot-base p { margin: 0; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }

/* ---- the launch page: a focused page, with only the logo and the demo in its header */
.focused .site-header .menu { display: flex; position: static; flex-direction: row; padding: 0; background: none; border: none; }
.focused .menu-btn { display: none; }

/* ---- the theme switch in the header */
/* wide screens: the switch closes the menu row; phones: it sits beside the menu button, and the menu's own is hidden */
.nav-tools { display: none; align-items: center; gap: 8px; }
.theme-btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: 6px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--sheet); color: var(--ink); cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease, background-color 0.15s ease; }
.theme-btn:hover { border-color: var(--ink-3); background: var(--tint); }
.theme-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-tools .theme-btn { margin-left: 0; }
@media (max-width: 940px) {
  .nav-tools { display: flex; }
  .menu .theme-btn { display: none; }
  .focused .menu .theme-btn { display: grid; }
}
@media (max-width: 440px) { .focused .menu > a:not(.btn) { display: none; } }
.theme-btn .sun { display: none; }
[data-theme="dark"] .theme-btn .sun { display: block; }
[data-theme="dark"] .theme-btn .moon { display: none; }
.site-header { transition: box-shadow 0.25s ease, background-color 0.25s ease; }
.site-header.scrolled { box-shadow: 0 10px 30px -22px rgba(8, 20, 15, 0.45); }

/* ---- motion (Imtiaz, 28 October: "animation and smooth browsing ... across the entire website"); none of it under
   reduced motion, where everything simply shows */
@media (prefers-reduced-motion: no-preference) {
  /* smooth moves from page to page, where the browser can */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out 0.22s ease both; }
  ::view-transition-new(root) { animation: vt-in 0.38s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

  /* the opening: the headline, its line and the buttons in turn, then the count sheet and its rows */
  .js .hero-text > *, .js .page-hero .container.narrow > * { animation: rise 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  .js .hero-text > :nth-child(2), .js .page-hero .container.narrow > :nth-child(2) { animation-delay: 0.08s; }
  .js .hero-text > :nth-child(3), .js .page-hero .container.narrow > :nth-child(3) { animation-delay: 0.16s; }
  .js .hero-text > :nth-child(4), .js .page-hero .container.narrow > :nth-child(4) { animation-delay: 0.24s; }
  .js .hero-text > :nth-child(5) { animation-delay: 0.32s; }
  .js .hero-media { animation: rise-in 0.9s 0.18s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  .js .countsheet .cs-table tbody tr, .js .countsheet .cs-table tfoot tr, .js .countsheet .cs-signs li { animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  .js .countsheet .cs-table tbody tr:nth-child(1) { animation-delay: 0.45s; }
  .js .countsheet .cs-table tbody tr:nth-child(2) { animation-delay: 0.55s; }
  .js .countsheet .cs-table tbody tr:nth-child(3) { animation-delay: 0.65s; }
  .js .countsheet .cs-table tfoot tr { animation-delay: 0.78s; }
  .js .countsheet .cs-signs li:nth-child(1) { animation-delay: 0.9s; }
  .js .countsheet .cs-signs li:nth-child(2) { animation-delay: 1s; }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } }
  @keyframes rise-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } }

  /* sections rise in once as they arrive, the pieces of each a beat apart (site.js marks them) */
  .js .rv { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d, 0ms); }
  .js .rv.in { opacity: 1; transform: none; }

  /* feedback where a hand lands */
  .person, .steps li, .card, .founding li, .countdown div { transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease; }
  .person:hover, .steps li:hover, .founding li:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
  .card-link:hover { transform: translateY(-3px); }
  .parts a .ic { transition: transform 0.2s ease; }
  .parts a:hover .ic { transform: translateY(-3px); }
  .more::after { transition: transform 0.2s ease; }
  .more:hover::after, .parts a:hover .more::after { transform: translateX(3px) rotate(45deg) translateY(-1px); }
  .btn:active { transform: scale(0.98); }
  .btn-primary:hover, .btn-gold:hover { box-shadow: 0 10px 24px -14px rgba(16, 36, 27, 0.6); }

  /* the countdown ticks */
  .countdown b.tick { animation: tick 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
  @keyframes tick { from { opacity: 0; transform: translateY(-35%); } }
}
/* the questions open and close smoothly (site.js animates the height of each answer) */
.faq-a { overflow: hidden; }
.faq-item summary { transition: color 0.15s ease; }
.faq-item summary:hover { color: var(--link); }

/* the theme switch cross-fades the page instead of sliding it */
:root.theme-swap::view-transition-old(root) { animation: none; }
:root.theme-swap::view-transition-new(root) { animation: theme-in 0.35s ease both; }
@keyframes theme-in { from { opacity: 0; } }
/* a closing answer shows its marker closed at once */
.faq-item.closing summary::after { transform: translateY(-70%) rotate(45deg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .js .rv { opacity: 1 !important; transform: none !important; } }

/* ---- the dropdowns (site.js builds each from its select; Imtiaz, 28 October: "Dropdowns need to be custom too") */
.form .field { display: grid; gap: 7px; font-weight: 600; font-size: 0.95rem; line-height: 1.35; }
.form .field .opt { font-weight: 420; color: var(--ink-3); }
.tt-form .field { display: grid; gap: 6px; min-width: 0; font-size: 0.92rem; color: var(--ink-2); }
.tt-form .field.full { grid-column: 1 / -1; }
.pick { position: relative; min-width: 0; }
.pick-btn { position: relative; display: flex; align-items: center; width: 100%; min-width: 0; min-height: 48px; padding: 11px 42px 11px 13px; font: inherit; font-weight: 450; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line-2); border-radius: 11px; cursor: pointer; text-align: left; user-select: none; -webkit-user-select: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.tt-form .pick-btn { min-height: 44px; padding: 10px 40px 10px 12px; border-radius: 10px; }
.pick-btn:hover { border-color: var(--ink-3); }
.pick-btn:focus-visible, .field.open .pick-btn { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 22%, transparent); }
.pick-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-val.empty { color: var(--ink-3); }
.pick-btn svg { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
.field.open .pick-btn svg { transform: rotate(180deg); }
.pick-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; max-height: min(320px, 60vh); overflow-y: auto; overscroll-behavior: contain; background: var(--sheet); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 18px 44px -18px rgba(8, 24, 17, 0.38), 0 2px 6px rgba(8, 24, 17, 0.08); font-weight: 450; font-size: 0.97rem; }
.pick-list.up { top: auto; bottom: calc(100% + 6px); }
.pick-list ul { list-style: none; margin: 0; padding: 0; }
.pick-list [role="option"] { position: relative; display: flex; align-items: center; min-height: 42px; padding: 9px 12px 9px 34px; border-radius: 9px; color: var(--ink); cursor: pointer; line-height: 1.3; }
.pick-list [role="option"].ph { color: var(--ink-3); }
.pick-list [role="option"].active { background: var(--tint); }
.pick-list [role="option"][aria-selected="true"] { font-weight: 620; }
.pick-list [role="option"][aria-selected="true"]::before { content: ""; position: absolute; left: 13px; top: 50%; width: 10px; height: 5px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: translateY(-75%) rotate(-45deg); }
.pick-list [role="option"][aria-disabled="true"] { opacity: 0.45; cursor: default; }
.pick-group { padding: 10px 12px 4px; font-size: 0.8rem; font-weight: 650; color: var(--ink-3); }
[data-theme="dark"] .pick-list { box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.8); }
@media (pointer: coarse) { .pick-list [role="option"] { min-height: 46px; } }
@media (prefers-reduced-motion: no-preference) {
  .pick-list:not([hidden]) { animation: pick-in 0.16s cubic-bezier(0.2, 0.7, 0.2, 1); transform-origin: top center; }
  .pick-list.up:not([hidden]) { transform-origin: bottom center; }
  @keyframes pick-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
}
/* a field the form's checks or the server marked */
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"], .pick-btn[aria-invalid="true"] { border-color: #c2412d; }
[data-theme="dark"] .form input[aria-invalid="true"], [data-theme="dark"] .form textarea[aria-invalid="true"], [data-theme="dark"] .pick-btn[aria-invalid="true"] { border-color: #ff8a7a; }
/* after a sign-up: the demo, with the pass the reply carried */
.done .done-demo { display: grid; gap: 12px; justify-items: start; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.done .done-demo[hidden] { display: none; }
.done .done-demo p { margin: 0; }