/* ==========================================================================
   Hifz Progress Tracker — website styles
   One stylesheet for all six pages. No third-party code; the fonts are self-hosted in fonts/.
   Colours, fonts and corner sizes follow the app (hifz-calculator.html) — see README.

   Contents
   1. Tokens
   2. Base
   3. Layout helpers
   4. Header and navigation
   5. Buttons and links
   6. Shared pieces (example tag, phone placeholder, para grid, ticks list)
   7. Index
   8. Features
   9. How it works
   10. Get the app
   11. Forms
   12. Footer
   13. Motion (all animation lives here — see README to switch it off)
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
/* The app's fonts, self-hosted (SIL Open Font License, see fonts/OFL-*.txt). Latin only. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/figtree-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/amiri-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/amiri-700-latin.woff2") format("woff2");
}

:root {
  --ground: #eef2ee;        /* page background (app --bg) */
  --surface: #fbfcfa;       /* panels and cards (app --surface) */
  --surface-2: #d3ddd5;     /* tiles, rules and hovers (app --line) */
  --ink: #14231d;           /* running text (app --ink) */
  --ink-soft: #526059;      /* secondary text: app --muted #5b6b63 darkened to pass 4.5:1 on --surface-2 */
  --brand: #0f5a43;         /* green: actions and fields (app --green) */
  --brand-strong: #0b4433;  /* hover and text on tint: a darker shade of app --green */
  --brand-tint: #dfeee5;    /* pale green surface (app --done) */
  --brand-tint-2: #cee5d7;  /* --brand-tint one step darker, for hover */
  --on-brand: #ffffff;      /* text on --brand (app --green-ink) */
  --on-brand-soft: #d9eee4; /* secondary text on --brand (app PDF report band) */
  --on-ink: #e8efe9;        /* text on --ink, the footer (app dark-mode --ink) */
  --on-ink-soft: #9db0a5;   /* secondary text on --ink (app dark-mode --muted) */
  --field-border: #788c82;  /* form box edge: app --muted lightened, 3:1 on --ground */
  --shade: 20, 35, 29;      /* --ink as r, g, b for shadows */
  --error: #b3261e;         /* app .msg and .err */
  --focus: #1d6fd1;         /* app --focus */

  --font-text: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;                                  /* app body text */
  --font-display: var(--font-text);                           /* headings: the app's are Figtree too */
  --font-number: "Amiri", Georgia, serif;                     /* big dates and numbers (app .big) */

  --text-s: 1rem;                                             /* 16px notes */
  --text-m: 1.125rem;                                         /* 18px body (mobile) */
  --text-l: clamp(1.25rem, 1.1rem + 0.5vw, 1.4375rem);        /* leads, h3 */
  --text-xl: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem);        /* h2, numbers */
  --text-xxl: clamp(2.125rem, 1.3rem + 4.4vw, 4.75rem);          /* h1 */

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --max: 1200px;
  --section: clamp(4rem, 2.6rem + 6vw, 8.5rem);
  --header-h: 68px;
  --radius: 14px;                                             /* app cards */
  --radius-s: 10px;                                           /* app inputs and buttons */
  --radius-m: 12px;                                           /* app panels (details) */

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Subtle eight-point geometric tile, used only as a background accent on green fields */
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='1.25'%3E%3Crect x='18' y='18' width='28' height='28'/%3E%3Crect x='18' y='18' width='28' height='28' transform='rotate(45 32 32)'/%3E%3Cpath d='M0 0l9 9M64 0l-9 9M0 64l9-9M64 64l-9-9'/%3E%3C/g%3E%3C/svg%3E");
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--text-m) / 1.6 var(--font-text);
  overflow-x: clip;
  overflow-wrap: break-word;
}

@media (min-width: 1024px) {
  body { font-size: 1.1875rem; }
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3 { margin: 0; text-wrap: balance; }

h1, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink);
}

h1 { font-size: var(--text-xxl); line-height: 1.04; }
h2 { font-size: var(--text-xl); line-height: 1.1; }
h3 { font-size: var(--text-l); line-height: 1.3; font-weight: 650; }

p { margin: 0; max-width: 62ch; text-wrap: pretty; }
p + p { margin-top: 1em; }

ul, ol { margin: 0; padding: 0; }

a { color: var(--brand-strong); text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }

strong { font-weight: 650; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--brand); color: var(--on-brand); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: max(var(--gutter), env(safe-area-inset-left));
  top: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--ground);
  font-weight: 600;
  border-radius: 999px;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* 3. Layout helpers --------------------------------------------------------- */
.wrap {
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.section { padding-block: calc(var(--section) / 2); }
.section:first-child { padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.section--tight-top { padding-top: 0; }

.field-green {
  --focus: var(--on-brand);
  background-color: var(--brand);
  background-image: var(--pattern);
  color: var(--on-brand);
  padding-block: var(--section);
  margin-block: calc(var(--section) / 2);
}
.field-green h2, .field-green h3 { color: var(--on-brand); }
.field-green a:not(.btn) { color: var(--on-brand); }

.field-surface {
  background: var(--surface);
  padding-block: var(--section);
  margin-block: calc(var(--section) / 2);
}

.lead {
  font-size: var(--text-l);
  line-height: 1.5;
  color: var(--ink);
  max-width: 34em;
}

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.section-head > * + * { margin-top: 1rem; }

.page-head { padding-top: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.page-head h1 { font-size: clamp(2.25rem, 1.4rem + 3.8vw, 4.25rem); max-width: 16ch; }
.page-head .lead { margin-top: 1.25rem; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 2rem + 2vw, 4rem);
  align-items: center;
}
@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 1rem + 5vw, 7rem); }
  .split--flip > :first-child { order: 2; }
}

.stack > * + * { margin-top: 1.25rem; }

/* 4. Header and navigation -------------------------------------------------- */
.site-header {
  container: header / inline-size;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ground);
  padding-top: env(safe-area-inset-top);
}
/* Soft shadow, shown once the page scrolls (opacity only, see Motion) */
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 14px;
  transform: translateY(100%);
  background: linear-gradient(rgba(var(--shade), 0.08), rgba(var(--shade), 0));
  opacity: 0;
  pointer-events: none;
}
.site-header.is-scrolled::after { opacity: 1; }

.header-inner {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--header-h);
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-name .nw { white-space: nowrap; }
.brand-name .br { display: block; }
@media (min-width: 480px) {
  .brand { font-size: 1.0625rem; }
  .brand-name .br { display: inline; }
}

/* Mobile: links fold into a panel. Without JavaScript they sit in a row below. */
.site-nav { order: 4; width: 100%; padding-bottom: 0.75rem; }
.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.site-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.875rem;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 550;
  font-size: 1rem;
  touch-action: manipulation;
}
.site-nav a[aria-current="page"] { background: var(--brand-tint); color: var(--brand-strong); font-weight: 650; }

.header-cta { order: 2; }

.menu-toggle {
  order: 3;
  display: none;
  width: 48px; height: 48px;
  margin-right: -6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.menu-toggle-bars { position: relative; display: block; width: 22px; height: 14px; margin: auto; }
.menu-toggle-bars::before,
.menu-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 200ms var(--ease-out);
}
.menu-toggle-bars::before { top: 2px; }
.menu-toggle-bars::after { bottom: 2px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 1279.98px) {
  .js .menu-toggle { display: block; }
  .js .header-inner { flex-wrap: nowrap; }
  .js .site-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    width: auto;
    padding: 0.5rem max(var(--gutter), env(safe-area-inset-left)) 1.25rem max(var(--gutter), env(safe-area-inset-right));
    background: var(--ground);
    box-shadow: 0 18px 30px -18px rgba(var(--shade), 0.28);
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s linear 220ms;
  }
  .js .site-nav.is-open {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s;
  }
  .js .site-nav ul { flex-direction: column; gap: 0.125rem; }
  .js .site-nav a { min-height: 52px; padding: 0 1rem; font-size: 1.125rem; border-radius: var(--radius-s); }
}

/* Very narrow screens or large phone text: keep the mark, move the name to screen readers only */
@container header (max-width: 22rem) {
  .header-cta.btn { white-space: normal; }
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 350px) {
    .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  }
}
@media (max-width: 420px) {
  .site-header .wrap { padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right)); }
  .header-cta.btn { padding-inline: 0.875rem; font-size: 0.9375rem; }
  .brand { gap: 0.5rem; font-size: 0.9375rem; }
  .brand-mark { width: 26px; height: 26px; }
}

@media (min-width: 1280px) {
  .header-inner { flex-wrap: nowrap; gap: 1.5rem; }
  .brand { margin-right: 0; }
  .site-nav { order: 2; width: auto; padding: 0; margin-left: auto; }
  .site-nav ul { flex-wrap: nowrap; gap: 0.125rem; }
  .site-nav a { padding: 0 0.75rem; font-size: 1rem; white-space: nowrap; }
  .header-cta { order: 3; }
}

/* 5. Buttons and links ---------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0 1.375rem;
  border: 0;
  border-radius: 999px;
  font: 650 1rem / 1.2 var(--font-text);
  text-decoration: none;
  text-align: center;
  text-wrap: balance;
  line-height: 1.15;
  min-width: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-secondary { background: var(--brand-tint); color: var(--brand-strong); }
.btn-light { background: var(--on-brand); color: var(--brand-strong); }
.btn-lg { min-height: 56px; padding: 0 1.75rem; font-size: 1.0625rem; }
.header-cta.btn { min-height: 44px; padding-block: 0.25rem; padding-inline: 1.125rem; flex: 0 1 auto; white-space: nowrap; }
.menu-toggle, .brand-mark { flex-shrink: 0; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
@media (max-width: 479.98px) { .btn-row .btn-lg { flex: 1 1 100%; } }
.lead + .ticks { margin-top: 1.5rem; }

/* 6. Shared pieces ---------------------------------------------------------- */

/* "Example plan" — a plain, readable label for illustrative numbers */
.example-tag {
  display: inline-block;
  font-size: var(--text-s);
  font-weight: 650;
  color: var(--brand-strong);
}
.field-green .example-tag,
.whatif .example-tag,
.finish-card .example-tag { color: var(--on-brand-soft); }

/* Phone-shaped screenshot placeholder. Replace the inner .screen with
   <img src="screenshots/NAME.png" alt="…"> when real images exist. */
.phone {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 9 / 19.5;
  margin-inline: auto;
  padding: 11px;
  border-radius: 44px;
  background: var(--ink);
}
.phone::before {
  content: "";
  position: absolute;
  top: 21px; left: 50%;
  width: 30%; height: 22px;
  translate: -50% 0;
  border-radius: 999px;
  background: var(--ink);
  z-index: 1;
}
.phone .screen,
.phone > img {
  display: grid;
  place-content: center;
  gap: 0.5rem;
  width: 100%; height: 100%;
  border-radius: 34px;
  padding: 1.5rem;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(var(--shade), 0.035) 14px 15px),
    var(--surface);
  color: var(--ink-soft);
  text-align: center;
  object-fit: cover;
}
.screen-label { font-weight: 650; color: var(--ink); font-size: 1rem; line-height: 1.35; }
.screen-file { font-size: 0.875rem; }
.phone--small { width: min(100%, 230px); border-radius: 36px; padding: 9px; }
.phone--small::before { top: 17px; height: 18px; }
.phone--small .screen { border-radius: 28px; }

/* The 30 para tiles */
.para-figure { margin: 0; }
.para-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(6px, 1.4vw, 10px);
  max-width: 440px;
}
.para-grid li {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-weight: 650;
  font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  font-variant-numeric: tabular-nums;
}
.para-grid li::before,
.para-grid li::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
}
.para-grid li::before { content: ""; background: var(--brand); }
.para-grid li::after { content: attr(data-n); color: var(--on-brand); }
.para-figure figcaption { margin-top: 1rem; font-size: var(--text-s); color: var(--ink-soft); max-width: 440px; }

/* List with small square markers (echoes the para tiles) */
.ticks { list-style: none; }
.ticks li { position: relative; padding-left: 1.625rem; }
.ticks li + li { margin-top: 0.625rem; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.625rem; height: 0.625rem;
  border-radius: 3px;
  background: var(--brand);
}
.field-green .ticks li::before { background: var(--on-brand-soft); }

/* 7. Index ------------------------------------------------------------------ */
.hero { padding-top: clamp(2.25rem, 1rem + 5vw, 6rem); padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 2rem + 2vw, 4rem); align-items: center; }
.hero h1 { max-width: 15ch; }
.hero .lead { margin-top: 1.5rem; }
.hero .btn-row { margin-top: 2rem; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
}

.finish-card {
  --focus: var(--on-brand);
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  border-radius: var(--radius);
  background-color: var(--brand);
  background-image: var(--pattern);
  color: var(--on-brand);
}
.finish-lead { margin-top: 1.25rem; font-size: var(--text-l); }
.finish-date {
  margin-top: 0.5rem;
  font-family: var(--font-number);
  font-weight: 600;
  font-size: clamp(2.125rem, 1.4rem + 3.2vw, 3.625rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.finish-date .w { display: inline-block; }
.finish-dua { margin-top: 0.75rem; font-family: var(--font-display); font-style: italic; font-size: var(--text-l); }
.finish-meta { margin-top: 1.5rem; font-size: var(--text-s); color: var(--on-brand-soft); }

.trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.75rem;
  margin: 0 auto;
  max-width: none;
  text-align: center;
  font-weight: 650;
  font-size: 1.0625rem;
  line-height: 1.45;
}
.trust-strip { background: var(--brand-tint); color: var(--brand-strong); padding: 1.125rem 0; }

.plan-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 2rem + 2vw, 4rem); align-items: start; }
@media (min-width: 880px) {
  .plan-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(3rem, 1rem + 5vw, 7rem); }
}
.plan-grid .ticks { margin-top: 1.75rem; }

.stats-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.stats-head p { color: var(--on-brand-soft); }
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 1rem + 2.5vw, 3rem) clamp(1rem, 0.5rem + 2vw, 3rem);
  margin: 0;
}
@media (min-width: 900px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.25rem; }
.stat dt { font-size: var(--text-s); line-height: 1.4; color: var(--on-brand-soft); max-width: 16ch; }
.stat dd {
  margin: 0;
  font-family: var(--font-number);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
}

.stats-note { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); font-size: var(--text-s); color: var(--on-brand-soft); }

.promises { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 880px) { .promises { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.promises h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.01em; }
.promises p { margin-top: 0.625rem; }

.next-links { list-style: none; display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 880px) { .next-links { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.card-link {
  display: block;
  height: 100%;
  padding: 1.5rem 1.5rem 1.625rem;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  touch-action: manipulation;
}
.card-link h3 { color: var(--brand-strong); }
.card-link h3::after { content: " →"; }
.card-link p { margin-top: 0.375rem; color: var(--ink-soft); }

.cta-band { text-align: left; }
.cta-band .btn-row { margin-top: 2rem; }

/* 8. Features --------------------------------------------------------------- */
.jump { margin-top: 2rem; }
.jump ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-weight: 550;
  font-size: 1rem;
  touch-action: manipulation;
}

.for-parents { margin-top: 0; }
.for-parents .ticks { margin-top: 1.25rem; columns: 1; }
@media (min-width: 880px) { .for-parents .ticks { columns: 2; column-gap: 4rem; } .for-parents .ticks li { break-inside: avoid; } }

.tour { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.tour-phone { display: none; }
.group { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.group + .group { margin-top: 0; }
.group h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.group-lead { margin-top: 0.75rem; font-family: var(--font-display); font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); line-height: 1.3; color: var(--brand-strong); max-width: 26em; }
.group .ticks { margin-top: 1.5rem; }
.group .more { margin-top: 1.75rem; }
.group .phone { margin-top: 2.5rem; width: min(100%, 240px); border-radius: 38px; padding: 9px; }
.group .phone .screen { border-radius: 30px; }
.split > .phone { width: min(100%, 260px); }
@media (min-width: 880px) { .split > .phone { width: min(100%, 300px); } }

@media (min-width: 1024px) {
  .tour-ready .tour { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(4rem, 2rem + 4vw, 7rem); align-items: start; }
  .tour-ready .tour-phone { display: block; position: sticky; top: calc(var(--header-h) + 2.5rem); }
  .tour-ready .tour .group .phone { display: none; }
  .tour-ready .tour .group { min-height: min(620px, 78svh); display: flex; flex-direction: column; justify-content: center; }
}
.tour-screens { position: relative; display: grid; height: 100%; }
.tour-screens .screen { grid-area: 1 / 1; }
.tour-screens .screen[aria-hidden="true"] { opacity: 0; }

.rest-groups .group { display: grid; gap: 1rem 4rem; }
@media (min-width: 960px) {
  .rest-groups .group { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .rest-groups .group > .group-body { grid-column: 2; }
  .rest-groups .group > h2 { grid-row: 1 / span 2; }
}
.rest-groups .group-lead { margin-top: 0; }

/* Expandable detail */
.more { border-radius: var(--radius-m); background: var(--surface); }
.more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  padding: 0.75rem 1.125rem;
  border-radius: var(--radius-m);
  font-weight: 650;
  color: var(--brand-strong);
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  margin-right: 4px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}
.more[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.more-body { padding: 0 1.125rem 1.25rem; }
.more-body > * + * { margin-top: 0.875rem; }
.more-body .ticks li + li { margin-top: 0.5rem; }

/* "What if" slider */
.whatif {
  margin-top: 2rem;
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  border-radius: var(--radius);
  background: var(--brand);
  background-image: var(--pattern);
  color: var(--on-brand);
  --focus: var(--on-brand);
}
.whatif-readout { margin-top: 1rem; }
.whatif-lines { display: block; font-size: var(--text-l); font-weight: 650; }
.whatif-finish { display: block; margin-top: 0.25rem; color: var(--on-brand-soft); font-size: var(--text-s); }
.whatif-date-wrap { display: grid; margin-top: 0.125rem; }
.whatif-date {
  grid-area: 1 / 1;
  font-family: var(--font-number);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.1;
  font-variant-numeric: lining-nums;
}
.whatif-control { margin-top: 1.5rem; }
.whatif-control label { display: block; font-weight: 650; font-size: var(--text-s); margin-bottom: 0.25rem; }
.whatif input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.whatif input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.3); }
.whatif input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.3); }
.whatif input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px; height: 30px;
  margin-top: -11px;
  border: 0;
  border-radius: 50%;
  background: var(--on-brand);
}
.whatif input[type="range"]::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--on-brand); }
.whatif input[type="range"]:focus-visible { outline-offset: 2px; border-radius: 999px; }
.whatif-ticks { display: flex; justify-content: space-between; padding-inline: 4px; font-size: 0.9375rem; color: var(--on-brand-soft); font-variant-numeric: tabular-nums; }
.whatif-ticks span { width: 22px; text-align: center; }

.example-table { width: 100%; max-width: 30rem; margin-top: 0.5rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.example-table caption { text-align: left; font-weight: 650; padding-bottom: 0.5rem; }
.example-table th, .example-table td { text-align: left; padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--surface-2); }
.example-table thead th { font-size: var(--text-s); color: var(--ink-soft); }

/* 9. How it works ----------------------------------------------------------- */
.journey { list-style: none; position: relative; }
.journey-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
}
.journey-step:last-child { padding-bottom: 0; }
.marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  font: 650 1.25rem / 1 var(--font-text);
  font-variant-numeric: tabular-nums;
}
.marker::before,
.marker::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.marker::before { content: ""; background: var(--brand); }
.marker::after { content: attr(data-n); color: var(--on-brand); }
/* The connecting line between markers */
.seg {
  position: absolute;
  left: 27px;
  top: 56px;
  bottom: 0;
  width: 2px;
  background: var(--surface-2);
  overflow: hidden;
}
.seg-fill { position: absolute; inset: 0; background: var(--brand); transform-origin: top; }
.step-body { padding-top: 0.625rem; min-width: 0; }
.step-body h2 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); }
.step-body > p, .step-body > .ticks { margin-top: 1rem; }
.step-media { margin-top: 2rem; }
@media (min-width: 960px) {
  .step-body.has-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 0 4rem; align-items: start; }
  .step-body.has-media > .step-media { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; }
}

/* 10. Get the app ------------------------------------------------------------ */
.url-big {
  display: inline-block;
  padding-block: 0.375rem;
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.625rem, 1.2rem + 2.2vw, 2.75rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.note {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-m);
  background: var(--brand-tint);
  color: var(--brand-strong);
  max-width: 44rem;
}
.platforms { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 880px) { .platforms { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.platform { min-width: 0; padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); border-radius: var(--radius); background: var(--ground); }
.platform h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); letter-spacing: -0.01em; }
.platform .sub { margin-top: 0.25rem; color: var(--ink-soft); }

.num-steps { list-style: none; counter-reset: s; margin-top: 1.5rem; }
.num-steps > li { counter-increment: s; position: relative; padding-left: 3rem; min-height: 2.25rem; }
.num-steps > li + li { margin-top: 1.125rem; }
.num-steps > li::before {
  content: counter(s);
  position: absolute;
  left: 0; top: -0.05em;
  display: grid;
  place-items: center;
  width: 2.125rem; height: 2.125rem;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 650;
  font-size: 1rem;
}

.two-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 880px) { .two-facts { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.two-facts p { margin-top: 0.75rem; }

/* 11. Forms ------------------------------------------------------------------ */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 2rem + 2vw, 4rem); }
@media (min-width: 960px) { .form-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 6rem; } }
.form-aside > * + * { margin-top: 1rem; }

.form { max-width: 40rem; }
.field { margin: 0 0 1.5rem; padding: 0; border: 0; min-width: 0; }
.field > label,
.field > legend {
  display: block;
  padding: 0;
  margin-bottom: 0.5rem;
  font-weight: 650;
}
.optional { font-weight: 400; color: var(--ink-soft); }
.hint { display: block; margin: -0.25rem 0 0.5rem; font-size: var(--text-s); color: var(--ink-soft); }

.input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 1rem;
  border: 2px solid var(--field-border);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  font: 400 1.0625rem / 1.4 var(--font-text); /* 17px: never below 16px, so iOS won't zoom */
}
textarea.input { min-height: 9rem; resize: vertical; }
.input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--brand); }
.input[aria-invalid="true"] { border-color: var(--error); }

.choices { display: grid; gap: 0.5rem; }
@media (min-width: 560px) { .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-s);
  background: var(--surface);
  cursor: pointer;
  font-weight: 550;
  touch-action: manipulation;
}
.choice input {
  flex: none;
  width: 22px; height: 22px;
  margin: 0;
  accent-color: var(--brand);
}
.choice:has(input:checked) { background: var(--brand-tint); color: var(--brand-strong); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice input:focus-visible { outline: none; }
fieldset[aria-invalid="true"] .choice { box-shadow: inset 0 0 0 2px var(--error); }

.error { margin-top: 0.5rem; color: var(--error); font-weight: 600; font-size: var(--text-s); }
.error::before { content: "! "; }

.form-status {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-m);
  background: var(--brand-tint);
  color: var(--brand-strong);
  font-weight: 600;
}
.form-status:focus { outline: none; }
.form-status:focus-visible { outline: 3px solid var(--focus); }
.noscript-note { margin-top: 1rem; font-weight: 600; color: var(--ink-soft); }

.coming-soon {
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 650;
  font-size: var(--text-s);
}

/* 12. Footer ----------------------------------------------------------------- */
.site-footer {
  margin-top: calc(var(--section) / 2);
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0 calc(2rem + env(safe-area-inset-bottom));
  background-color: var(--ink);
  color: var(--ground);
  --focus: var(--on-brand);
}
.site-footer .trust { justify-content: flex-start; text-align: left; color: var(--on-brand-soft); }
.footer-name {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 1.2rem + 5vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: none;
}
.footer-grid { display: grid; gap: 2rem; margin-top: 2rem; }
@media (min-width: 880px) { .footer-grid { grid-template-columns: 1fr auto; align-items: end; } }
.footer-grid > div > p { color: var(--on-ink); }
.footer-grid .btn { margin-top: 1.5rem; }
.footer-nav ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 0 2rem; }
.footer-nav a { display: flex; align-items: center; min-height: 44px; color: var(--ground); text-decoration: none; font-size: 1rem; }
.footer-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.footer-small { margin-top: 2.5rem; font-size: 0.9375rem; color: var(--on-ink-soft); max-width: none; }

/* Hover styles only for devices that really hover (no sticky hover after a tap) */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--brand-strong); }
  .btn-secondary:hover { background: var(--brand-tint-2); }
  .btn-light:hover { background: var(--brand-tint); }
  .site-nav a:hover { background: var(--surface); }
  .site-nav a[aria-current="page"]:hover { background: var(--brand-tint); }
  .jump a:hover { background: var(--surface-2); }
  .more > summary:hover { background: var(--surface-2); }
  .choice:hover { background: var(--surface-2); }
  .footer-nav a:hover { text-decoration: underline; }
  a:not(.btn):not(.card-link):hover { text-decoration-thickness: 2.5px; }
}

/* 13. Motion ------------------------------------------------------------------
   Rules: transform and opacity only (the journey line scales on Y); everything
   plays once; every "before" state is scoped to html.motion, which is only set
   when JavaScript runs, IntersectionObserver exists and reduced motion is off.
   To switch all animation off, delete this section and the inline <script> in
   each page's <head> (see README). */

/* Press feedback and hover lift (hover only on devices that really hover) */
.btn { transition: transform 160ms var(--ease-out), background-color 200ms ease; }
.btn:active { transform: scale(0.97); }
.card-link { transition: transform 220ms var(--ease-out); }
.card-link:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .card-link:hover { transform: translateY(-3px); }
  .card-link:hover:active { transform: translateY(-3px) scale(0.98); }
}

/* Header shadow fades in once the page scrolls */
.site-header::after { transition: opacity 200ms ease; }

/* Expandable sections: smooth height where the browser supports it, instant elsewhere */
.more > summary::after { transition: transform 200ms var(--ease-out); }
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  .more::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 280ms var(--ease-out), content-visibility 280ms allow-discrete;
  }
  .more[open]::details-content { block-size: auto; }
}
.more[open] .more-body { animation: fade-in 280ms var(--ease-out); }

/* Smooth scrolling for the on-page links */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Features: the pinned phone crossfades between screens */
.tour-screens .screen { transition: opacity 300ms ease; }

/* What-if slider: the finish date crossfades as you drag */
.whatif-date { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.whatif-date.is-entering { opacity: 0; transform: translateY(6px); }
.whatif-date.is-leaving { opacity: 0; transform: translateY(-6px); }

/* Form success message fades in */
.motion .form-status { opacity: 0; transition: opacity 260ms var(--ease-out); }
.motion .form-status.is-shown { opacity: 1; }

/* Sections and cards fade up 12px, once */
.motion .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
}
.motion .reveal.is-in { opacity: 1; transform: none; }
.motion .promises .reveal:nth-child(2),
.motion .next-links .reveal:nth-child(2),
.motion .platforms .reveal:nth-child(2),
.motion .two-facts .reveal:nth-child(2),
.motion .split .reveal + .reveal,
.motion .form-layout .reveal + .reveal { transition-delay: 70ms; }
.motion .promises .reveal:nth-child(3),
.motion .next-links .reveal:nth-child(3) { transition-delay: 140ms; }

/* Signature 1 — hero finish date: label, then the date word by word, then "in sha Allah" (~1.2s, once) */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.motion [data-hero-finish] .finish-lead { animation: rise 380ms var(--ease-out) 100ms both; }
.motion [data-hero-finish] .finish-date .w { animation: rise 380ms var(--ease-out) both; }
.motion [data-hero-finish] .finish-date .w:nth-child(1) { animation-delay: 360ms; }
.motion [data-hero-finish] .finish-date .w:nth-child(2) { animation-delay: 460ms; }
.motion [data-hero-finish] .finish-date .w:nth-child(3) { animation-delay: 560ms; }
.motion [data-hero-finish] .finish-date .w:nth-child(4) { animation-delay: 660ms; }
.motion [data-hero-finish] .finish-dua { animation: fade-in 400ms var(--ease-out) 860ms both; }
.motion [data-hero-finish] .finish-meta { animation: fade-in 400ms var(--ease-out) 900ms both; }

/* Signature 2 — 30 para tiles turn green one after another (30ms stagger, once) */
.motion .para-grid li::before,
.motion .para-grid li::after {
  opacity: 0;
  transform: scale(0.82);
  transition:
    opacity 240ms var(--ease-out) calc(var(--i, 0) * 30ms),
    transform 280ms var(--ease-out) calc(var(--i, 0) * 30ms);
}
.motion .para-grid.is-in li::before,
.motion .para-grid.is-in li::after { opacity: 1; transform: none; }

/* Signature 5 — journey line: segments scale down from each marker; markers fill as the line arrives */
.motion .seg-fill { transform: scaleY(0); }
.motion .marker::before,
.motion .marker::after {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 260ms var(--ease-out), transform 300ms var(--ease-out);
}
.motion .journey-step.is-reached .marker::before,
.motion .journey-step.is-reached .marker::after { opacity: 1; transform: none; }

/* Reduced motion: final states, instantly */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}