/* IQRAA — marketing site styles
   Tokens come from the IQRAA Android app: cream page with a pale-gold lattice,
   deep green primary, gold accents, amber for the record action. */

/* ---------- fonts (self-hosted, SIL Open Font License: assets/fonts/OFL.txt) ----------
   Only the faces the pages use: Latin for the Latin families, Arabic for Amiri.
   Nunito and Outfit are variable fonts, so one file covers their weights. */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/cormorant-garamond-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: "Cinzel"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/cinzel-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: "Outfit"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("assets/fonts/outfit-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: "Nunito"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/nunito-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: "Nunito"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/nunito-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: "Amiri"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/amiri-400-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; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/amiri-700-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; }

:root {
  /* colour */
  --green-900: #0f3d24;
  --green-800: #14532d;
  --green-700: #1d7a45;
  --green-600: #2e9e5b;
  --green-100: #e8f5e9;
  --cream: #f7f4ee;
  --cream-2: #fffbf2;
  --white: #ffffff;
  --ink: #1a1f1c;
  --ink-2: #1f2a24;
  --muted: #5b6b62;
  --line: #e6e0d2;
  --lattice: #e3d3b3;
  --gold: #d4a537;
  --gold-700: #c39a4a;
  --gold-100: #fff3dc;
  --amber: #f4a629;
  --red: #ef4444;
  --blue: #2a68b6;
  --navy: #1b2a4a;

  --bg: var(--cream);
  --bg-elevated: var(--white);
  --text: var(--ink);
  --text-muted: var(--muted);
  --border: var(--line);
  --cta: var(--green-700);
  --cta-hover: var(--green-800);
  --cta-active: var(--green-900);

  /* type */
  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --font-brand: "Cinzel", "Georgia", serif;
  --wood-1: #d9bb8c;
  --wood-2: #b58752;
  --wood-3: #7e5530;
  --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-arabic: "Amiri", "Scheherazade New", serif;

  /* scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-phone: 0 30px 60px -20px rgba(20, 60, 35, 0.35), 0 12px 24px -12px rgba(20, 60, 35, 0.25);
  --shadow-card: 0 10px 30px -14px rgba(31, 42, 36, 0.25);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur: 600ms;
  --dur-slow: 900ms;

  --container: 1180px;
  --gutter: clamp(16px, 4vw, 48px);
  --phone-ratio: 772 / 1780;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.015em; margin: 0; }
h1, h2 { font-family: var(--font-serif); font-weight: 700; letter-spacing: 0; line-height: 1.02; }

p { margin: 0; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--green-800); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

/* the app's lattice: a star on every node, a star in every cell, X bands between nodes */
.lattice {
  background-color: var(--cream);
  background-image: url("assets/brand/lattice.svg");
  background-size: 56px 56px;
  background-position: center top;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-700);
}

.lede { font-size: 1.1875rem; color: var(--text-muted); max-width: 34em; }

.arabic { font-family: var(--font-arabic); direction: rtl; unicode-bidi: isolate; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  border-radius: 14px; border: 0;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--cta); color: #fff; }
.btn-primary:hover { background: var(--cta-hover); }
.btn-primary:active { background: var(--cta-active); }

.btn-ghost { background: transparent; color: var(--green-800); box-shadow: inset 0 0 0 1.5px var(--green-700); }
.btn-ghost:hover { background: var(--green-100); }

.btn-store {
  background: #111; color: #fff; padding: 0 20px 0 14px; min-height: 56px; border-radius: 12px;
  text-align: left; line-height: 1.1;
}
.btn-store:hover { background: #000; }
.btn-store svg { flex: none; width: 28px; height: 28px; }
.btn-store small { display: block; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; }
.btn-store span { display: block; font-size: 1.125rem; font-weight: 600; }
.btn-store.is-light { background: #fff; color: #111; }
.btn-store.is-light:hover { background: var(--cream-2); }
/* Store badges: Google's and Apple's official artwork (assets/brand/google-play-badge-*.png, app-store-badge-*.svg),
   as their brand rules require; both at the same height */
.store-badge { display: inline-flex; border-radius: 12px; line-height: 0; transition: transform var(--dur-fast) ease, filter var(--dur-fast) ease; }
.store-badge img { display: block; width: auto; height: 56px; }
.store-badge:hover { filter: brightness(1.2); }
.store-badge:active { transform: translateY(1px); }
.store-badge:focus-visible { border-radius: 12px; }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 244, 238, 0.82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.nav.is-scrolled { border-bottom-color: var(--border); background: rgba(247, 244, 238, 0.94); }

.nav-inner { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: var(--space-6); }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 38px; height: 38px; }
.brand span { font-family: var(--font-brand); font-weight: 600; font-size: 1.375rem; letter-spacing: 0.06em; color: var(--green-800); }

.nav-links { display: flex; align-items: center; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.nav-links a:not(.btn) {
  font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-2);
}
.nav-links a:not(.btn):hover { color: var(--green-700); }

.nav-lang { display: flex; align-items: center; gap: 0; }
.nav-lang a { padding: 0 8px; border-left: 1px solid var(--border); color: var(--text-muted) !important; }
.nav-lang a:first-child { border-left: 0; padding-left: 0; }
.nav-lang a[aria-current="page"] { color: var(--green-800) !important; }

/* Support sits in the phone menu and on wide screens; between the two the bar has no room for it (the footer links it). */
@media (min-width: 721px) and (max-width: 1179px) { .nav-support { display: none; } }

.nav-cta { display: grid; justify-items: center; gap: 4px; }
.nav-cta-note { font-family: var(--font-display); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.nav-links .btn { min-height: 42px; padding: 0 20px; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; }

.btn-outline { background: var(--white); color: var(--green-800); box-shadow: inset 0 0 0 1.5px var(--green-800); border-radius: 12px; }
.btn-outline:hover { background: var(--green-800); color: #fff; }

.nav-toggle {
  display: none; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; color: var(--ink);
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: currentColor; margin: 5px auto; transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease; }

/* ---------- phones ---------- */

.phone {
  position: relative;
  aspect-ratio: var(--phone-ratio);
  border-radius: 9.5% / 4.2%;
  overflow: hidden;
  background: #0b0b0b;
  box-shadow: var(--shadow-phone), 0 0 0 7px #0b0b0b, 0 0 0 8px rgba(255, 255, 255, 0.25);
}
.phone img { width: 100%; height: 100%; object-fit: cover; }
.phone.is-flat { box-shadow: var(--shadow-card); border-radius: 22px; background: transparent; }

/* a raw UI crop, no device frame */
.ui-crop { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); background: var(--white); }

/* ---------- hero: phones standing on a desk ---------- */

.hero {
  position: relative; padding: clamp(24px, 3vw, 40px) 0 0; overflow-x: clip;
  /* the wall, then the desk photograph (with the Quran) along the bottom */
  background-color: #f6efe3;
  background-image: url("assets/brand/hero-desk.webp"), linear-gradient(180deg, #f8f3ea 0%, #f4ecdf 60%, #eee3d1 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center bottom, center top;
  background-size: 100% auto, 100% 100%;
}
/* the lattice only on the right, fading out behind the headline and above the desk */
.hero::before {
  content: ""; position: absolute; inset: 0 0 20% 0; pointer-events: none; z-index: 0;
  background-image: url("assets/brand/lattice.svg"); background-size: 56px 56px; opacity: 0.55;
  -webkit-mask-image: linear-gradient(90deg, transparent 0 38%, #000 70%), linear-gradient(180deg, #000 60%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0 38%, #000 70%), linear-gradient(180deg, #000 60%, transparent 100%);
  mask-composite: intersect;
}

.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; gap: var(--space-8);
}

/* keeps the copy above the desk: the photo strip is 0.232 x the page width tall, the desk edge 35% up it */
.hero-copy { padding-bottom: calc(8.1vw + 44px); }

.hero h1 {
  font-size: clamp(2.2rem, 3.9vw, 3.4rem);
  text-transform: uppercase; color: var(--green-800);
  margin: var(--space-4) 0 1.25rem;
  max-width: 12.5em;
}
.hero h1 em { font-style: normal; color: var(--ink); }
/* The tilted back phone leans ~30px into this column, so the heading's second sentence and the lede
   stop short of the column edge (all languages; measured clear by 20px+ from 1025 to 2560 px wide). */
@media (min-width: 1025px) {
  .hero h1 em { display: block; padding-right: 1em; }
  .hero .lede { padding-right: 2em; }
}

.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }

.hero-facts { margin: var(--space-6) 0 0; font-size: 0.9375rem; color: var(--text-muted); display: grid; gap: 2px; }
.hero-facts div { display: flex; flex-wrap: wrap; gap: 0 6px; }
.hero-facts dt { font-weight: 700; color: var(--ink-2); }
.hero-facts dd { margin: 0; }

.eyebrow-star { display: inline-flex; align-items: center; gap: 8px; }
.eyebrow-star svg { width: 14px; height: 14px; color: var(--gold); }

.hero-stage { position: relative; height: clamp(480px, 48vw, 640px); }

/* the desk's front edge sits about 7.6vw above the hero's bottom; the phones stand just in front of it */
.hero-phone { position: absolute; bottom: 7.4vw; width: clamp(230px, 21vw, 290px); }
.hero-phone.is-front { left: 30%; z-index: 2; transform: translateY(var(--py, 0)); }
.hero-phone.is-back { left: 0; z-index: 1; width: clamp(210px, 19vw, 270px); transform: translateY(var(--py, 0)) rotate(-6deg); transform-origin: bottom center; }

/* the phone frame: dark bezel with a thin bright edge */
.hero-phone.phone { overflow: visible; background: transparent; box-shadow: none; border-radius: 0; aspect-ratio: auto; }
.hero-phone > img:first-child {
  display: block; width: 100%; height: auto; box-sizing: border-box;
  border: 8px solid #141414; border-radius: 36px; background: #141414;
  box-shadow: 0 0 0 1.5px #4a4a4a, 0 0 0 2.5px rgba(255, 255, 255, 0.45),
    0 40px 50px -24px rgba(90, 60, 25, 0.5), 0 18px 28px -16px rgba(0, 0, 0, 0.3);
}
.hero-phone .reflect {
  position: absolute; left: 0; top: calc(100% + 12px); width: 100%; height: auto;
  transform: scaleY(-1); opacity: 0.14; border-radius: 36px;
  -webkit-mask-image: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.9) 100%);
  mask-image: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.9) 100%);
  pointer-events: none;
}
/* contact shadow on the desk */
.hero-phone::after {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -14px; height: 22px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(70, 45, 20, 0.5), rgba(70, 45, 20, 0) 70%);
  z-index: -1;
}

/* the app's record button, lifted out of the UI */
.hero-mic {
  position: absolute; z-index: 3; left: 20%; bottom: calc(7.4vw - 24px);
  display: grid; justify-items: center; gap: 10px;
  transform: translateY(var(--py, 0));
}
.hero-mic-btn {
  position: relative; z-index: 1;
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--amber); color: #fff;
  box-shadow: 0 18px 40px -12px rgba(244, 166, 41, 0.75), 0 0 0 6px rgba(255, 255, 255, 0.9);
}
.hero-mic-btn svg { width: 36px; height: 36px; }
.hero-mic-ring {
  position: absolute; left: 50%; top: 42px; width: 84px; height: 84px; margin: -42px 0 0 -42px;
  border-radius: 50%; border: 2px solid var(--amber); opacity: 0;
  animation: mic-pulse 2.6s ease-out infinite;
}
.hero-mic-label {
  font-family: var(--font-body); font-style: italic; font-size: 0.9375rem; color: var(--text-muted);
  background: rgba(247, 244, 238, 0.9); padding: 2px 10px; border-radius: var(--radius-pill);
}
@keyframes mic-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* the scalloped edge at the bottom of the hero: 60px over the photo, 28px hanging into the next section */
.hero { z-index: 2; }
.hero-divider {
  position: absolute; left: 0; right: 0; bottom: -28px; width: 100%; height: 88px; display: block;
  pointer-events: none; z-index: 3;
  filter: drop-shadow(0 10px 10px rgba(70, 45, 20, 0.22)) drop-shadow(0 2px 2px rgba(70, 45, 20, 0.12));
}
.hero + .team { padding-top: calc(clamp(48px, 7vw, 96px) + 28px); }

/* ---------- section plumbing ---------- */

.section { padding: clamp(72px, 10vw, 140px) 0; }
.section-tight { padding: clamp(48px, 7vw, 96px) 0; }

.section-head { max-width: 40em; }
.section-head h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); margin: var(--space-3) 0 var(--space-4); }
.section-head p { font-size: 1.125rem; color: var(--text-muted); }

/* ---------- how it works (before / after) ---------- */

.steps { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.steps-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }

.steps-list { counter-reset: step; list-style: none; margin: var(--space-8) 0 0; padding: 0; }
.steps-list li { position: relative; padding: var(--space-6) 0 var(--space-6) 64px; border-top: 1px solid var(--border); }
.steps-list li::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; left: 0; top: var(--space-6);
  font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; color: var(--gold-700);
}
.steps-list h3 { font-size: 1.25rem; margin-bottom: var(--space-2); display: flex; align-items: center; gap: 8px; }
.steps-list h3 svg { width: 18px; height: 18px; color: var(--amber); }
.steps-list p { color: var(--text-muted); font-size: 1rem; }

.before-after { display: grid; gap: var(--space-4); position: sticky; top: 96px; width: 100%; max-width: 560px; justify-self: end; }
.before-after figure { margin: 0; position: relative; }
.before-after figcaption {
  position: absolute; left: 14px; top: 12px;
  padding: 4px 12px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.9); color: var(--ink-2);
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.before-after .ui-crop { box-shadow: none; border: 1px solid var(--border); background: var(--cream); }
.before-after figure:nth-child(2) { margin-left: clamp(24px, 6%, 56px); }

/* ---------- feature: feedback ---------- */

.feedback-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }

.feedback-visual { position: relative; }
.feedback-visual .phone { width: min(100%, 320px); margin-left: auto; }
.feedback-visual .ui-crop {
  position: absolute; left: -4%; bottom: 10%; width: 72%; z-index: 2;
  border: 1px solid var(--border);
}
/* the word popup is portrait: narrower, so the results screen stays visible */
.feedback-visual .ui-crop.word-popup { width: 44%; left: 2%; bottom: 8%; border-radius: 22px; }

.feature-copy h2 { font-size: clamp(2.1rem, 3.8vw, 3.2rem); margin: var(--space-3) 0 var(--space-4); }
.feature-copy p { color: var(--text-muted); max-width: 32em; }
.feature-copy p + p { margin-top: var(--space-4); }

.legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.legend span {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px;
  border-radius: var(--radius-pill); background: var(--white); border: 1px solid var(--border);
  font-family: var(--font-display); font-size: 0.875rem; font-weight: 500;
}
.legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }

/* ---------- feature: tajweed (text-first) ---------- */

.tajweed { background: var(--green-900); color: #fff; position: relative; overflow: hidden; }
.tajweed::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("assets/brand/lattice-dark.svg"); background-size: 56px 56px; opacity: 0.55;
}
.tajweed > .container { position: relative; }
.tajweed .eyebrow { color: var(--gold); }
/* the calligraphic "iqraa" (read) from the brand banner, set in gold */
.tajweed-calligraphy {
  position: absolute; right: 0; top: -0.1em; z-index: 0;
  font-family: var(--font-arabic); font-weight: 700; font-size: clamp(9rem, 18vw, 17rem); line-height: 1;
  color: var(--gold); opacity: 0.92; pointer-events: none; user-select: none;
  text-shadow: 0 0 60px rgba(212, 165, 55, 0.25);
}
.tajweed .section-copy { position: relative; z-index: 1; }
.tajweed h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); max-width: 14em; margin: var(--space-3) 0 var(--space-4); }
.tajweed .lede { color: rgba(255, 255, 255, 0.78); }

.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: var(--space-12); border-top: 1px solid rgba(255, 255, 255, 0.18); }
.rules > div { padding: var(--space-8) var(--space-6) var(--space-8) 0; border-right: 1px solid rgba(255, 255, 255, 0.18); }
.rules > div:last-child { border-right: 0; }
.rules > div + div { padding-left: var(--space-6); }
.rules .arabic { font-size: clamp(2.6rem, 4.6vw, 3.6rem); line-height: 1.3; color: var(--gold); text-align: left; direction: rtl; }
.rules h3 { font-size: 1.25rem; margin: var(--space-2) 0 var(--space-2); }
.rules p { color: rgba(255, 255, 255, 0.72); font-size: 0.9375rem; }

.tajweed-foot { margin-top: var(--space-12); display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); align-items: baseline; color: rgba(255, 255, 255, 0.72); font-size: 0.9375rem; }
.tajweed-foot strong { color: #fff; font-family: var(--font-display); font-weight: 500; }
.tag-premium {
  display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--gold); color: var(--green-900);
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle;
}

/* ---------- feature: library & reader ---------- */

.library { position: relative; overflow: hidden; }
.library-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }

.library-stage { position: relative; height: clamp(520px, 52vw, 720px); }
.library-stage .phone { position: absolute; width: clamp(230px, 24vw, 300px); }
.library-stage .reader { left: 0; top: 0; z-index: 2; }
.library-stage .shelf { right: 4%; top: 18%; z-index: 1; transform: scale(0.9); }

.library-stage .reader-crop {
  position: absolute; left: -10%; bottom: -2%; width: 54%; z-index: 3;
  border: 1px solid var(--border);
}

/* ---------- feature: habit ---------- */

.habit { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.habit-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }

.habit-stack { position: relative; display: grid; gap: var(--space-4); }
.habit-stack .ui-crop { border: 1px solid var(--border); }
.habit-stack .card-home { width: 92%; }
.habit-stack .card-streak { width: 78%; margin-left: auto; margin-top: -8px; }
.habit-stack .card-verse { width: 72%; margin-left: 8%; }

.habit-points { margin: var(--space-6) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.habit-points li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; color: var(--text-muted); }
.habit-points svg { width: 22px; height: 22px; color: var(--green-700); margin-top: 3px; }

/* ---------- progress ---------- */

.progress-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.progress-visual { position: relative; display: grid; gap: var(--space-4); }
.progress-visual .ui-crop { border: 1px solid var(--border); }
.progress-visual .rank { width: 88%; }
.progress-visual .stats { width: 76%; margin-left: auto; margin-top: -10px; }

/* ---------- showcase ---------- */

.showcase { padding: clamp(56px, 8vw, 110px) 0; }
.showcase .section-head { margin-bottom: var(--space-12); }

.showcase-track {
  display: flex; gap: clamp(16px, 2.4vw, 32px);
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 24px var(--gutter) 48px;
  margin: 0 calc(-1 * var(--gutter));
  scrollbar-width: none;
}
.showcase-track::-webkit-scrollbar { display: none; }
.showcase-track .phone { flex: 0 0 clamp(200px, 20vw, 250px); scroll-snap-align: center; }
.showcase-track .phone:nth-child(even) { transform: translateY(36px); }
.showcase-track::after { content: ""; flex: 0 0 var(--gutter); }

.showcase-hint { display: flex; justify-content: space-between; align-items: center; font-size: 0.9375rem; color: var(--text-muted); }
.showcase-nav { display: flex; gap: 8px; }
.showcase-nav button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--white); cursor: pointer; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.showcase-nav button:hover { border-color: var(--green-700); color: var(--green-700); }

/* ---------- team (text only, centred) ---------- */

.team { text-align: center; }
.team-inner { max-width: 40em; margin-inline: auto; display: grid; justify-items: center; gap: var(--space-3); }
.team-star { color: var(--gold); width: 28px; height: 28px; margin-bottom: var(--space-2); }
.team-star svg { width: 100%; height: 100%; }
.team h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.team-body { font-size: 1.1875rem; color: var(--ink-2); max-width: 30em; }
.team-fields { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; }
.team-fields li { font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-800); }
.team-fields li + li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin: 0 14px 2px; vertical-align: middle; }
.team-thanks { color: var(--text-muted); margin-top: var(--space-4); }
.team-disclaimer { font-size: 0.9375rem; font-style: italic; color: var(--text-muted); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); }

/* ---------- plans ---------- */

.plans { background: var(--white); border-top: 1px solid var(--border); }
.plans-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); }
.plans-table { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--ink); }
.plans-table > div { padding: var(--space-6) var(--space-6) var(--space-8) 0; }
.plans-table > div + div { border-left: 1px solid var(--border); padding-left: var(--space-6); }
.plans-table h3 { font-size: 1.375rem; display: flex; align-items: center; gap: 10px; }
.plans-table ul { margin: var(--space-4) 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.plans-table li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 1rem; }
.plans-table li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.plans-table .is-premium li::before { background: var(--green-700); }
.plans-note { margin-top: var(--space-8); font-size: 0.9375rem; color: var(--text-muted); max-width: 40em; }

/* ---------- final CTA ---------- */

.cta { background: var(--green-800); color: #fff; position: relative; overflow: hidden; padding: clamp(80px, 10vw, 150px) 0; }
.cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("assets/brand/lattice-dark.svg"); background-size: 56px 56px; opacity: 0.5;
}
.cta > .container { position: relative; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); align-items: center; gap: var(--space-12); }
.cta-mark { width: 72px; height: 72px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.4); }
.cta-mark img { width: 60px; height: 60px; }
.cta h2 { font-size: clamp(2.2rem, 4.8vw, 4rem); margin: var(--space-6) 0 var(--space-4); max-width: 12em; }
.cta p { color: rgba(255, 255, 255, 0.8); max-width: 30em; font-size: 1.125rem; }
.cta .hero-cta { margin-top: var(--space-8); }
.cta-qr { display: inline-flex; align-items: center; gap: 12px; padding: 10px var(--space-6) 10px 10px; border-radius: 18px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22); }
.cta-qr img { flex: none; width: 104px; height: 104px; padding: 7px; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.5); }
.cta-qr figure { flex: none; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cta-qr figcaption { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: #fff; }
.cta-qr p { margin: 0 0 0 12px; max-width: 13em; font-size: 0.875rem; line-height: 1.4; color: rgba(255, 255, 255, 0.8); }
.cta-qr strong { display: block; margin-bottom: 0.2em; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: #fff; }
.cta-mascot { justify-self: end; width: min(100%, 300px); }
.cta-mascot img { width: 100%; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.3)); }

/* ---------- support page (support/, fr/support/, es/support/) ---------- */

.support { padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 9vw, 120px); }
.support-inner { width: min(100% - 2 * var(--gutter), 46rem); }
.support h1 { font-size: clamp(2.6rem, 6vw, 4rem); color: var(--green-800); margin-bottom: var(--space-6); }
.support h2 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); color: var(--ink-2); margin-bottom: var(--space-6); }
.support a { color: var(--green-700); font-weight: 700; text-underline-offset: 3px; overflow-wrap: anywhere; }
.support a:hover { color: var(--green-900); }
.support-intro { font-size: 1.1875rem; color: var(--ink-2); padding: var(--space-6); border-radius: var(--radius-md); background: var(--gold-100); box-shadow: 0 0 0 1px var(--lattice); }
.support-block { margin-top: clamp(48px, 6vw, 72px); }
.faq { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.faq li { padding: var(--space-6); border-radius: var(--radius-md); background: var(--bg-elevated); box-shadow: 0 0 0 1px var(--border), var(--shadow-card); }
.faq h3 { font-size: 1.125rem; line-height: 1.35; color: var(--green-900); margin-bottom: var(--space-2); }
.faq p { color: var(--ink-2); }
.support-legal { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); }
.support-legal a { font-family: var(--font-display); font-weight: 600; }
.support-company { font-size: 0.9375rem; color: var(--text-muted); padding-top: var(--space-4); border-top: 1px solid var(--border); }

/* ---------- legal pages (privacy/, terms/, delete-account/) ----------
   Built by scripts/website/build_pages.py from al_muallim_backend/static/legal/;
   the content's classes are prefixed legal- so they never meet the site's own. */

.legal { padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 9vw, 120px); }
.legal-inner { width: min(100% - 2 * var(--gutter), 48rem); }
.legal-doc {
  padding: clamp(22px, 5vw, 56px); border-radius: var(--radius-lg);
  background: var(--bg-elevated); box-shadow: 0 0 0 1px var(--border), var(--shadow-card);
  color: var(--ink-2); overflow-wrap: break-word;
}
.legal-doc h1 { font-size: clamp(2.3rem, 5.4vw, 3.4rem); color: var(--green-800); margin-bottom: var(--space-3); }
.legal-doc h2 { font-size: clamp(1.55rem, 2.8vw, 1.95rem); line-height: 1.15; color: var(--green-900); margin: 2.2em 0 0.6em; scroll-margin-top: 96px; }
.legal-doc h3 { font-size: 1.125rem; line-height: 1.35; color: var(--green-900); margin: 1.6em 0 0.45em; }
.legal-doc p, .legal-doc ul, .legal-doc ol { margin: 0 0 1em; }
.legal-doc ul, .legal-doc ol { padding-left: 1.4em; }
.legal-doc li { margin: 0.35em 0; }
.legal-doc a { color: var(--green-700); font-weight: 700; text-underline-offset: 3px; }
.legal-doc a:hover { color: var(--green-900); }
.legal-meta { color: var(--text-muted); font-size: 0.9375rem; margin-bottom: var(--space-8) !important; }
.legal-lead { font-size: 1.125rem; }
.legal-small { font-size: 0.9375rem; color: var(--text-muted); }
.legal-caps { text-transform: uppercase; font-size: 0.95em; }
.legal-path { font-weight: 700; }

.legal-card { margin: 0 0 1.4em; padding: var(--space-6); border-radius: var(--radius-md); background: var(--cream-2); box-shadow: 0 0 0 1px var(--border); }
.legal-card > :last-child { margin-bottom: 0; }
.legal-summary { background: var(--gold-100); box-shadow: 0 0 0 1px var(--lattice); }
.legal-summary h2, .legal-toc h2 { margin-top: 0; font-size: 1.375rem; }
.legal-toc ol { margin: 0; }
.legal-note { margin: 0 0 1.4em; padding: 14px 18px; border-radius: var(--radius-sm); background: #fdf1e7; border: 1px solid #e0a36f; color: #5b3212; }
.legal-note > :last-child { margin-bottom: 0; }
div.legal-note > strong:first-child { display: block; margin-bottom: 0.2em; } /* the deletion page's notice heading; not the inline lead-in of the privacy notes */

.legal-doc table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 1.4em; font-size: 0.9688rem; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.legal-doc th, .legal-doc td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.legal-doc th { background: var(--green-100); font-family: var(--font-display); font-weight: 600; color: var(--green-900); }
.legal-doc tbody tr:last-child td { border-bottom: 0; }

.legal-steps { counter-reset: step; list-style: none; padding: 0 !important; }
.legal-steps li { counter-increment: step; position: relative; padding: 0.1em 0 0.1em 2.6em; margin: 0.7em 0; }
.legal-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0.05em; width: 1.9em; height: 1.9em; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--green-700); color: #fff; font-weight: 700; font-size: 0.9rem;
}

.legal-field { margin: 0 0 1.1em; }
.legal-doc label { display: block; font-weight: 700; margin: 0 0 0.3em; }
.legal-hint { display: block; color: var(--text-muted); font-size: 0.9rem; font-weight: 400; }
.legal-doc input[type=email], .legal-doc textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--white);
  border: 1.5px solid #b9c7bf; border-radius: var(--radius-sm); padding: 0.65em 0.8em;
}
.legal-doc textarea { min-height: 6.5em; resize: vertical; }
.legal-doc input[aria-invalid=true] { border-color: #b3261e; }
.legal-field-error { color: #b3261e; font-size: 0.9375rem; font-weight: 700; margin: 0.35em 0 0 !important; }
.legal-field-error:empty, .legal-form-status:empty { display: none; }
.legal-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.legal-doc button[type=submit] {
  font: inherit; font-family: var(--font-display); font-weight: 600; min-height: 48px; padding: 0.75em 1.6em;
  border: 0; border-radius: var(--radius-pill); background: var(--cta); color: #fff; cursor: pointer;
}
.legal-doc button[type=submit]:hover { background: var(--cta-hover); }
.legal-doc button[disabled] { opacity: 0.65; cursor: progress; }
.legal-form-status { margin: 1em 0 0 !important; padding: 12px 14px; border-radius: var(--radius-sm); background: #fdecea; color: #b3261e; font-weight: 700; }
.legal-success { padding: var(--space-6); border-radius: var(--radius-md); background: var(--green-100); border: 1px solid #7bbf9f; color: var(--green-900); }
.legal-success h3 { margin-top: 0; }
.legal-success > :last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .legal-doc { font-size: 1rem; }
  .legal-doc button[type=submit] { width: 100%; }
  table.legal-stack, table.legal-stack tbody, table.legal-stack tr, table.legal-stack td { display: block; width: 100%; }
  table.legal-stack { border: 0; border-radius: 0; }
  table.legal-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.legal-stack tr { margin: 0 0 12px; padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); }
  table.legal-stack td { border: 0; padding: 6px 0; }
  table.legal-stack td::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
}

/* ---------- floating corner box: QR + social ---------- */

.dock {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 196px; padding: 14px 12px 12px; border-radius: 18px;
  background: rgba(255, 251, 242, 0.96); color: var(--green-900);
  box-shadow: 0 0 0 1px var(--border), 0 18px 40px -16px rgba(31, 42, 36, 0.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.dock.is-hidden { display: none; }
.dock-qrs { display: flex; gap: 12px; }
.dock-qrs figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dock-qrs img { width: 80px; height: 80px; padding: 4px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--border); }
.dock-qrs figcaption { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; color: var(--green-800); }
.dock-label { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; color: var(--green-900); }
.dock-social { display: flex; gap: 6px; margin: 2px 0 0; padding: 8px 0 0; list-style: none; border-top: 1px solid var(--border); width: 100%; justify-content: center; }
.dock-social a { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--green-800); transition: background-color 0.15s ease, color 0.15s ease; }
.dock-social a:hover, .dock-social a:focus-visible { background: var(--green-800); color: #fff; }
.dock-social svg { width: 15px; height: 15px; }
.dock-close {
  position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; border: 0; border-radius: 50%; padding: 0;
  background: var(--green-800); color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.5);
}
.dock-close:hover { background: var(--green-900); }
/* keep the footer's right end clear of the box */
@media (min-width: 721px) { .footer > .container { padding-right: 232px; } }

/* ---------- footer ---------- */

.footer { background: var(--green-900); color: rgba(255, 255, 255, 0.72); padding: var(--space-12) 0 var(--space-8); font-size: 0.9375rem; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-6); padding-bottom: var(--space-8); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.footer .brand span { color: #fff; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin: 0; padding: 0; list-style: none; }
.footer-links a { color: #fff; text-decoration: none; font-family: var(--font-display); font-weight: 500; }
.footer-links a:hover { color: var(--gold); }
.footer-bottom { padding-top: var(--space-6); display: grid; gap: var(--space-2); font-size: 0.8125rem; line-height: 1.6; }
.footer-bottom a { color: inherit; }

/* ---------- motion ---------- */

/* Sections fade in on scroll only once script has run (the inline head script adds .js),
   so text is never hidden from visitors or crawlers without JavaScript. The hero has no
   .reveal at all: it is visible on first paint. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 90ms; }
.js .reveal[data-delay="2"] { transition-delay: 180ms; }
.js .reveal[data-delay="3"] { transition-delay: 270ms; }

.hero-phone, .hero-mic { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero-phone, .hero-mic { transition: none !important; }
  .hero-mic-ring { animation: none; opacity: 0.5; }
  * { animation: none !important; }
}

/* ---------- responsive: tablet ---------- */

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero { background-size: 160% auto, 100% 100%; background-position: right bottom, center top; }
  .hero::before { -webkit-mask-image: linear-gradient(180deg, transparent 0 30%, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0 30%, #000 60%, transparent 100%); }
  .hero-copy { padding-bottom: var(--space-8); max-width: 36em; }
  .hero-stage { height: clamp(540px, 78vw, 700px); margin-right: calc(-1 * var(--gutter)); }
  .hero-phone { width: clamp(200px, 27vw, 250px); bottom: 12.4vw; }
  .hero-phone.is-front { left: 36%; }
  .hero-phone.is-back { left: 4%; width: clamp(210px, 28vw, 260px); }
  .hero-mic { left: 24%; bottom: calc(12.4vw - 24px); }
  .nav-cta-note { display: none; }
  .nav-links { gap: var(--space-4); }
  .nav-links a:not(.btn) { font-size: 0.75rem; letter-spacing: 0.08em; white-space: nowrap; }

  .steps-grid, .feedback-grid, .library-grid, .habit-grid, .progress-grid, .plans-grid { grid-template-columns: 1fr; }
  .before-after { position: static; justify-self: center; }
  .feedback-visual { order: -1; }
  .feedback-visual .phone { margin-left: auto; margin-right: 6%; }
  .library-stage { height: clamp(520px, 80vw, 680px); }
  .library-stage .reader { left: 4%; }
  .library-stage .shelf { right: 8%; }
  .library-stage .reader-crop { left: 0; }
  .tajweed-calligraphy { position: static; display: block; font-size: 6rem; margin-bottom: var(--space-4); text-align: left; direction: rtl; }
  .rules { grid-template-columns: 1fr; border-top: 0; }
  .rules > div { border-right: 0; border-top: 1px solid rgba(255, 255, 255, 0.18); padding: var(--space-6) 0; }
  .rules > div + div { padding-left: 0; }
  .cta > .container { grid-template-columns: 1fr; }
  .cta-mascot { justify-self: start; width: min(60%, 240px); }
}

/* ---------- responsive: phone ---------- */

@media (max-width: 720px) {
  body { font-size: 1rem; }
  .nav-inner { min-height: 64px; }
  .nav-toggle { display: inline-block; }
  .nav-links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream-2); border-bottom: 1px solid var(--border);
    padding: var(--space-2) var(--gutter) var(--space-4);
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links li { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .nav-links li:last-child { border-bottom: 0; padding-top: var(--space-4); }
  .nav-links .btn { width: 100%; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hero { padding-top: var(--space-8); }
  .hero h1 { font-size: clamp(2.2rem, 10vw, 2.9rem); }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .hero-facts { font-size: 0.875rem; }
  .hero { background-size: 230% auto, 100% 100%; background-position: 80% bottom, center top; }
  .hero-stage { height: 560px; margin: 0 calc(-1 * var(--gutter)); overflow: hidden; }
  .hero-phone { width: 50vw; max-width: 220px; bottom: 17.5vw; }
  .hero-phone.is-front { left: 34%; }
  .hero-phone.is-back { left: 2%; width: 45vw; max-width: 200px; }
  .hero-mic { left: 5%; bottom: calc(17.5vw - 20px); gap: 8px; }
  .hero-mic-btn { width: 68px; height: 68px; }
  .hero-mic-btn svg { width: 30px; height: 30px; }
  .hero-mic-ring { width: 68px; height: 68px; margin: -34px 0 0 -34px; top: 34px; }
  .hero-mic-label { font-size: 0.875rem; }
  .hero-phone > img:first-child { border-width: 6px; border-radius: 28px; }
  .hero-phone .reflect { border-radius: 28px; }
  .nav-cta { justify-items: stretch; }
  .nav-cta-note { display: none; }
  .nav-lang { padding: 12px 0; }
  .nav-lang a { padding: 0 12px; }

  .section { padding: 64px 0; }
  .steps-list li { padding-left: 48px; }
  .before-after figure:nth-child(2) { margin-left: 0; }

  .feedback-visual .phone { width: 70%; margin-right: 0; }
  .feedback-visual .ui-crop { left: 0; width: 86%; bottom: 6%; }
  .feedback-visual .ui-crop.word-popup { width: 48%; left: 0; bottom: 6%; }

  .library-stage { height: 112vw; max-height: 560px; }
  .library-stage .phone { width: 56vw; max-width: 240px; }
  .library-stage .reader { left: 0; top: 0; }
  .library-stage .shelf { right: 0; top: 14%; }
  .library-stage .reader-crop { display: none; }

  .habit-stack .card-home { width: 100%; }
  .habit-stack .card-streak { width: 88%; }
  .habit-stack .card-verse { width: 86%; margin-left: 3%; }

  .progress-visual .rank { width: 100%; }
  .progress-visual .stats { width: 86%; }

  .showcase-track .phone { flex-basis: 64vw; }
  .showcase-track .phone:nth-child(even) { transform: none; }
  .showcase-nav { display: none; }

  .plans-table { grid-template-columns: 1fr; }
  .plans-table > div + div { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; }

  .cta-mascot { width: 180px; }
  .cta-qr { display: none; }
  .dock { display: none; }
  .footer-top { flex-direction: column; align-items: flex-start; }
}