/* HifzTrack colour layer — Iznik tile palette over the emerald brand.
 * Loaded last. Repoints shared tokens, then gives each app section its own
 * colour: the nav chip, page band and table heads all follow --c.
 * The star shape is the rub el hizb, the marker printed in the Mushaf. */

:root {
  --green-700: #0E7A5A;
  --green-600: #0F8F69;
  --green-500: #14A87B;
  --green-100: #DDF5EA;
  --gold-700: #7A4C00;
  --gold-600: #8F5B00;
  --gold-500: #F5A400;
  --gold-400: #FFB91F;
  --gold-300: #FFD166;
  --gold-100: #FFF1CC;
  --cream: #F5F7FB;
  --cream-2: #E9EEF7;
  --line: #DCE3F0;
  --line-2: #C6D1E6;
  --danger: #B42D1A;
  --warning: #8F5B00;
  --lapis: #101E5E;
  --lapis-2: #182A7C;
  --cobalt: #2447C6;   --cobalt-hi: #8BA8FF;
  --emerald: #0E7A5A;  --emerald-hi: #3DDC97;
  --turquoise: #0A6F7A; --turquoise-hi: #37D5D6;
  --saffron: #8F5B00;  --saffron-hi: #FFC23C;
  --tomato: #B42D1A;   --tomato-hi: #FF8468;
  --plum: #7B2F8F;     --plum-hi: #D79BF2;
  --c: var(--cobalt);
  --c-hi: var(--cobalt-hi);
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50 0 64.6 14.6 85.4 14.6 85.4 35.4 100 50 85.4 64.6 85.4 85.4 64.6 85.4 50 100 35.4 85.4 14.6 85.4 14.6 64.6 0 50 14.6 35.4 14.6 14.6 35.4 14.6'/%3E%3C/svg%3E");
  --star-clip: polygon(50% 0, 64.6% 14.6%, 85.4% 14.6%, 85.4% 35.4%, 100% 50%, 85.4% 64.6%, 85.4% 85.4%, 64.6% 85.4%, 50% 100%, 35.4% 85.4%, 14.6% 85.4%, 14.6% 64.6%, 0 50%, 14.6% 35.4%, 14.6% 14.6%, 35.4% 14.6%);
}

::selection { background: var(--gold-300); color: var(--lapis); }
:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }

/* ---------- Section colours ---------- */
.nav-item:is([data-nav-key="dashboard"], [data-nav-key="progress"], [data-nav-key="lms"], [data-nav-key="analytics"], [data-nav-key="schools"], [data-nav-key="terms"]),
.app-shell:has(.nav-item.active:is([data-nav-key="dashboard"], [data-nav-key="progress"], [data-nav-key="lms"], [data-nav-key="analytics"], [data-nav-key="schools"], [data-nav-key="terms"])) {
  --c: var(--cobalt); --c-hi: var(--cobalt-hi);
}
.nav-item:is([data-nav-key="memorisation"], [data-nav-key="session"], [data-nav-key="qaidah"], [data-nav-key="qaidahCurriculum"], [data-nav-key="child"], [data-nav-key="students"]),
.app-shell:has(.nav-item.active:is([data-nav-key="memorisation"], [data-nav-key="session"], [data-nav-key="qaidah"], [data-nav-key="qaidahCurriculum"], [data-nav-key="child"], [data-nav-key="students"])) {
  --c: var(--emerald); --c-hi: var(--emerald-hi);
}
.nav-item:is([data-nav-key="revision"], [data-nav-key="revisions"], [data-nav-key="attendance"], [data-nav-key="attendanceStudent"], [data-nav-key="halaqahs"], [data-nav-key="teachers"], [data-nav-key="users"]),
.app-shell:has(.nav-item.active:is([data-nav-key="revision"], [data-nav-key="revisions"], [data-nav-key="attendance"], [data-nav-key="attendanceStudent"], [data-nav-key="halaqahs"], [data-nav-key="teachers"], [data-nav-key="users"])) {
  --c: var(--turquoise); --c-hi: var(--turquoise-hi);
}
.nav-item:is([data-nav-key="homework"], [data-nav-key="targets"], [data-nav-key="studentPayments"], [data-nav-key="pricing"], [data-nav-key="subscription"], [data-nav-key="subscriptions"], [data-nav-key="leads"]),
.app-shell:has(.nav-item.active:is([data-nav-key="homework"], [data-nav-key="targets"], [data-nav-key="studentPayments"], [data-nav-key="pricing"], [data-nav-key="subscription"], [data-nav-key="subscriptions"], [data-nav-key="leads"])) {
  --c: var(--saffron); --c-hi: var(--saffron-hi);
}
.nav-item:is([data-nav-key="attention"], [data-nav-key="exams"], [data-nav-key="requests"], [data-nav-key="audit"]),
.app-shell:has(.nav-item.active:is([data-nav-key="attention"], [data-nav-key="exams"], [data-nav-key="requests"], [data-nav-key="audit"])) {
  --c: var(--tomato); --c-hi: var(--tomato-hi);
}
.nav-item:is([data-nav-key="messages"], [data-nav-key="feedback"], [data-nav-key="reports"], [data-nav-key="reportCard"], [data-nav-key="khatm"], [data-nav-key="emailQueue"], [data-nav-key="branding"]),
.app-shell:has(.nav-item.active:is([data-nav-key="messages"], [data-nav-key="feedback"], [data-nav-key="reports"], [data-nav-key="reportCard"], [data-nav-key="khatm"], [data-nav-key="emailQueue"], [data-nav-key="branding"])) {
  --c: var(--plum); --c-hi: var(--plum-hi);
}
.nav-item:is([data-nav-key="settings"], [data-nav-key="import"], [data-nav-key="export"]) { --c-hi: #D6E0F2; }

/* ---------- Sidebar ---------- */
.nav-item__ico {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #06231A;
  background: var(--c-hi);
  transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.nav-item__ico svg, .nav-item svg { opacity: 1; width: 16px; height: 16px; }
.nav-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-item:hover .nav-item__ico { transform: rotate(-8deg) scale(1.12); }
.sidebar .nav-item.active {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  border-color: transparent;
  border-left-color: var(--c-hi);
  box-shadow: none;
}
.mobile-tabbar__item.active { color: var(--gold-300); background: rgba(255, 255, 255, 0.1); }

/* ---------- Page band ---------- */
.main .page-header h1 { color: var(--c); }
.page-header .crumbs { color: var(--c); }
.main .page-header::after {
  content: "";
  flex: 0 0 100%;
  height: 12px;
  background: var(--c);
  -webkit-mask: var(--star) left center / 12px 12px repeat-x;
  mask: var(--star) left center / 12px 12px repeat-x;
  opacity: 0.75;
}

/* ---------- Buttons: a tile edge that presses in ---------- */
.btn {
  background: var(--green-700);
  color: #fff;
  box-shadow: 0 3px 0 var(--green-900);
  transition: transform 0.1s, background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.1s;
}
.btn:hover { background: var(--green-600); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 0 var(--green-900); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--green-900); }
.btn.gold { background: var(--gold-400); color: var(--lapis); box-shadow: 0 3px 0 var(--gold-600); }
.btn.gold:hover { background: var(--gold-300); color: var(--lapis); box-shadow: 0 4px 0 var(--gold-600); }
.btn.gold:active { box-shadow: 0 0 0 var(--gold-600); }
.btn.ghost { background: #fff; color: var(--c); border-color: var(--line-2); box-shadow: 0 3px 0 var(--line-2); }
.btn.ghost:hover { background: color-mix(in srgb, var(--c) 9%, #fff); color: var(--c); border-color: var(--c); box-shadow: 0 4px 0 var(--c); }
.btn.ghost:active { box-shadow: 0 0 0 var(--c); }
.btn.danger { background: #fff; box-shadow: 0 3px 0 #E9C7C0; }
.btn.danger:hover { background: #FBEDEA; color: var(--danger); box-shadow: 0 4px 0 var(--danger); }
.btn.danger:active { box-shadow: 0 0 0 var(--danger); }
.btn:disabled, .btn:disabled:hover { transform: none; box-shadow: none; }

.mobile-topbar .btn.ghost { background: transparent; color: var(--cream); border-color: rgba(255, 255, 255, 0.4); box-shadow: none; }
.mobile-topbar .btn.ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; box-shadow: none; }

/* ---------- Stat cards: the tint follows what the number means ----------
 * Views already colour the value inline (danger, green, gold), so match on that:
 * problems read red, good news green, warnings saffron, plain counts blue. */
.card:has(> .card-value) {
  --tile: var(--cobalt);
  background: color-mix(in srgb, var(--tile) 9%, #fff);
  border-color: color-mix(in srgb, var(--tile) 26%, #fff);
  transition: transform 0.18s cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow 0.18s;
}
.card:has(> .card-value[style*="--green"]) { --tile: var(--emerald); }
.card:has(> .card-value[style*="--gold"]) { --tile: var(--saffron); }
.card:has(> .card-value[style*="--danger"]) { --tile: var(--tomato); }
.card:has(> .card-value[style*="--ink"]) { --tile: #4A5A78; }
.card:has(> .card-value):hover { transform: translateY(-3px); box-shadow: 0 5px 0 color-mix(in srgb, var(--tile) 40%, #fff); }
.card:has(> .card-value) .card-title, .card:has(> .card-value) .card-value { color: var(--tile); }
.card-title { color: var(--c); }

.hero-card {
  background: linear-gradient(120deg, var(--lapis), var(--lapis-2) 55%, var(--green-700));
  border-color: transparent;
}
.hero-card .juz-pip.filled { border-color: transparent; background: var(--saffron-hi); }
.hero-card .juz-pip.filled:nth-child(5n+2) { background: var(--turquoise-hi); }
.hero-card .juz-pip.filled:nth-child(5n+3) { background: var(--tomato-hi); }
.hero-card .juz-pip.filled:nth-child(5n+4) { background: var(--emerald-hi); }
.hero-card .juz-pip.filled:nth-child(5n+5) { background: var(--cobalt-hi); }

/* ---------- Teacher "Today" tiles: each opens its own section ---------- */
.today-session-tile {
  --tile: var(--saffron);
  background: color-mix(in srgb, var(--tile) 9%, #fff);
  border-color: color-mix(in srgb, var(--tile) 26%, #fff);
  transition: transform 0.18s cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow 0.18s;
}
.today-session-tile[data-testid="today-home-logs"] { --tile: var(--emerald); }
.today-session-tile[data-testid="today-rev-due"] { --tile: var(--turquoise); }
.today-session-tile[data-testid="today-hw-review"] { --tile: var(--plum); }
.today-session-tile[data-testid="today-attention"] { --tile: var(--tomato); }
.today-session-tile[data-testid="sad-today-present"] { --tile: var(--emerald); }
.today-session-tile[data-testid="sad-today-absent"] { --tile: var(--tomato); }
.today-session-tile[data-testid="sad-today-session"] { --tile: var(--cobalt); }
.today-session-tile:hover { transform: translateY(-3px); box-shadow: 0 5px 0 color-mix(in srgb, var(--tile) 40%, #fff); text-decoration: none; }
.today-session-tile .card-title, .today-session-tile .card-value { color: var(--tile); }

/* ---------- Student profile overview ---------- */
.sd-ov-tile { --tile: var(--emerald); border-top-color: var(--tile); }
.sd-ov-tile:nth-child(2) { --tile: var(--turquoise); }
.sd-ov-tile:nth-child(3) { --tile: var(--plum); }
.sd-ov-tile:nth-child(4) { --tile: var(--cobalt); }
.sd-ov-tile .sd-ov-k, .sd-ov-tile .sd-ov-v { color: var(--tile); }

/* ---------- Progress ---------- */
.progress > span {
  background: linear-gradient(90deg, var(--turquoise-hi), var(--green-500) 55%, var(--gold-400));
  transform-origin: left;
  animation: htGrow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes htGrow { from { transform: scaleX(0); } }

/* ---------- Tables, badges, inputs ---------- */
table.data th { color: var(--c); background: color-mix(in srgb, var(--c) 8%, #fff); }
table.data tbody tr { transition: background 0.12s; }
table.data tr:hover td { background: color-mix(in srgb, var(--c) 6%, #fff); }
.badge.gold { background: var(--gold-100); color: var(--gold-700); border-color: var(--gold-300); }
.badge.green { background: var(--green-100); color: #0A5E45; border-color: #9FE3C6; }
.badge.danger { background: #FFE6E0; border-color: #FFBFB0; }
.badge.neutral { background: #E4EAFB; color: var(--lapis-2); border-color: #C9D5F7; }
.input:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent);
  outline: none;
}

/* ---------- Sign-in ---------- */
.auth-hero { background: linear-gradient(150deg, var(--lapis), var(--lapis-2) 60%, var(--green-700)); }

/* ---------- Landing ---------- */
.landing-page--pro { background: #fff; }
.landing-page--pro .lp-nav { background: rgba(255, 255, 255, 0.86); border-bottom-color: var(--line); }

.lp-hero {
  min-height: 0;
  display: block;
  padding: clamp(36px, 6vh, 64px) var(--landing-pad-x) clamp(32px, 5vh, 56px);
  background: linear-gradient(170deg, var(--lapis) 0%, #0B1546 100%);
  color: #fff;
}
.lp-hero__content {
  max-width: calc(var(--landing-max) - 2 * var(--landing-pad-x));
  margin: 0 auto clamp(24px, 4vh, 40px);
  padding: 0;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
}
.lp-hero__h1 {
  margin: 0 0 16px;
  max-width: 15ch;
  font-size: clamp(2.3rem, 4.6vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #fff;
}
.lp-hero__lead { margin: 0 0 22px; max-width: 56ch; color: rgba(255, 255, 255, 0.84); }
.lp-hero__cta { justify-content: flex-start; }
.lp-hero .landing-cta-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45); box-shadow: 0 3px 0 rgba(255, 255, 255, 0.25); }
.lp-hero .landing-cta-ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: #fff; box-shadow: 0 4px 0 rgba(255, 255, 255, 0.5); }
.lp-hero__ayah { display: flex; flex-direction: column; justify-content: center; min-height: 16rem; margin: 0; text-align: right; }
.lp-hero__verse { transition: opacity 0.22s; }
.lp-hero__verse.is-changing { opacity: 0; }
.lp-hero__ayah blockquote {
  margin: 0 0 10px;
  font-family: var(--font-arabic);
  font-size: clamp(2rem, 3.7vw, 3rem);
  line-height: 1.5;
  color: var(--gold-300);
}
.lp-hero__ayah figcaption { font-size: 1.05rem; line-height: 1.45; color: rgba(255, 255, 255, 0.88); }
.lp-hero__ayah cite { display: block; margin-top: 4px; font-size: 0.92rem; font-style: normal; color: rgba(255, 255, 255, 0.72); }

.mz { max-width: calc(var(--landing-max) - 2 * var(--landing-pad-x)); margin: 0 auto; }
.mz__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  min-height: 44px;
  margin-bottom: 12px;
  font-size: 0.95rem;
}
.mz__readout { flex: 1 1 280px; margin: 0; display: flex; gap: 12px; align-items: baseline; color: #fff; font-weight: 600; }
.mz__readout-ar { font-family: var(--font-arabic); font-size: 1.25rem; color: var(--gold-300); font-weight: 400; }
.mz__count { margin: 0; color: var(--gold-300); font-weight: 700; font-variant-numeric: tabular-nums; }
.mz__clear {
  min-height: 36px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.15s;
}
.mz__clear:hover { background: rgba(255, 255, 255, 0.14); }
.mz__grid {
  display: grid;
  grid-template-columns: repeat(19, minmax(0, 1fr));
  /* Six rows of stars fit under the copy on a laptop, so Juz' Amma is in view. */
  max-width: max(760px, calc((100svh - 470px) * 19 / 6));
  margin-inline: auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.mz__star {
  --on: var(--saffron-hi);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.11);
  clip-path: var(--star-clip);
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(0.56rem, 0.95vw, 0.82rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: transform 0.16s cubic-bezier(0.3, 1.7, 0.5, 1), background 0.16s, color 0.16s;
}
.mz__star--1 { --on: var(--turquoise-hi); }
.mz__star--2 { --on: var(--tomato-hi); }
.mz__star--3 { --on: var(--emerald-hi); }
.mz__star--4 { --on: var(--plum-hi); }
.mz__star--5 { --on: var(--cobalt-hi); }
.mz__star:hover { background: rgba(255, 255, 255, 0.3); color: #fff; transform: scale(1.18); position: relative; z-index: 1; }
.mz__star:focus-visible { outline: none; background: #fff; color: var(--lapis); transform: scale(1.18); position: relative; z-index: 1; }
.mz__star.is-lit { background: var(--on); color: #0B1546; animation: mzPop 0.34s cubic-bezier(0.3, 1.7, 0.5, 1); }
.mz__star.is-lit:hover { background: var(--on); color: #0B1546; }
@keyframes mzPop { from { transform: scale(0.4) rotate(-45deg); } }

/* One steady gap between sections. White sections that touch share a single gap. */
.landing-page--pro { --lp-gap: clamp(44px, 6vw, 68px); }
.lp-section { padding-block: var(--lp-gap); }
.lp-section + .lp-section { padding-top: 0; }
.lp-preview, .lp-trust { padding-block: var(--lp-gap); }
.lp-chapter { padding-block: var(--lp-gap); }
.lp-section.lp-final { padding-top: var(--lp-gap); }
.lp-footer { padding-top: var(--lp-gap); }
/* The anchor links land clear of the sticky nav. */
.landing-page--pro section[id] { scroll-margin-top: 72px; }

.lp-proof { margin: 0; padding: 0; background: #fff; }
.lp-proof__inner { border: 0; border-radius: 0; background: none; box-shadow: none; }
.lp-proof__item { border-right: 0; padding-block: clamp(26px, 4vw, 40px); }
.lp-proof__item b { font-size: clamp(2.3rem, 4.6vw, 3.4rem); color: var(--cobalt); }
.lp-proof__item:nth-child(2) b { color: var(--turquoise); }
.lp-proof__item:nth-child(3) b { color: var(--tomato); }
.lp-proof__item:nth-child(4) b { color: var(--emerald); }
.lp-proof__item span { text-transform: none; letter-spacing: 0; font-size: 0.92rem; font-weight: 600; }

.lp-chapter { background: var(--tomato); }
.lp-chapter .landing-eyebrow { color: #FFD9CF; }
.lp-chapter__h2 { color: #fff; }
.lp-chapter__lead { color: rgba(255, 255, 255, 0.92); }

.lp-features { gap: 16px; }
.lp-feature {
  --c: var(--cobalt);
  --c-hi: var(--cobalt-hi);
  grid-template-columns: auto 1fr;
  padding: 22px;
  border: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-radius: 18px;
  background: color-mix(in srgb, var(--c) 7%, #fff);
  transition: transform 0.18s cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow 0.18s, background 0.18s;
}
.lp-feature:nth-child(2) { --c: var(--turquoise); --c-hi: var(--turquoise-hi); }
.lp-feature:nth-child(3) { --c: var(--tomato); --c-hi: var(--tomato-hi); }
.lp-feature:nth-child(4) { --c: var(--saffron); --c-hi: var(--saffron-hi); }
.lp-feature:nth-child(5) { --c: var(--plum); --c-hi: var(--plum-hi); }
.lp-feature:nth-child(6) { --c: var(--emerald); --c-hi: var(--emerald-hi); }
.lp-feature:hover { transform: translateY(-4px); box-shadow: 0 6px 0 var(--c-hi); background: color-mix(in srgb, var(--c) 11%, #fff); }
.lp-feature__ico {
  width: 56px;
  height: 56px;
  border-radius: 0;
  clip-path: var(--star-clip);
  background: var(--c-hi);
  color: #0B1546;
  box-shadow: none;
  transition: transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.lp-feature:hover .lp-feature__ico { transform: rotate(45deg); }
.lp-feature:hover .lp-feature__ico svg { transform: rotate(-45deg); }
.lp-feature__ico svg { transition: transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1); }
.lp-feature__title { color: var(--c); }

.lp-preview { background: #DFF6F5; }
.lp-preview .landing-eyebrow { color: var(--turquoise); }

.lp-roles__band { display: flex; border: 0; border-radius: 22px; background: none; box-shadow: none; }
.lp-roles__cell {
  flex: 1 1 0;
  border-right: 0;
  padding: clamp(26px, 3vw, 36px) 24px;
  background: var(--cobalt);
  color: #fff;
  transition: flex-grow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lp-roles__cell:hover { flex-grow: 1.45; }
.lp-roles__cell h3 { color: inherit; }
.lp-roles__cell p { color: inherit; opacity: 0.94; }
.lp-roles__cell[data-role="student"] { background: var(--gold-400); color: var(--lapis); }
.lp-roles__cell[data-role="parent"] { background: var(--tomato); }
.lp-roles__cell[data-role="admin"] { background: var(--turquoise); }

.lp-plan { border-color: var(--line); background: #fff; }
.lp-plan:hover { border-color: var(--cobalt); box-shadow: 0 6px 0 var(--cobalt-hi); }
.lp-plan.is-featured { border: 2px solid var(--lapis-2); background: var(--lapis-2); color: #fff; box-shadow: none; }
.lp-plan.is-featured:hover { box-shadow: 0 6px 0 var(--gold-400); }
.lp-plan.is-featured :is(.lp-plan__name, .lp-plan__tag, .lp-plan__limit, .lp-plan__features li) { color: #fff; border-color: rgba(255, 255, 255, 0.18); }
.lp-plan__badge { background: var(--gold-400); color: var(--lapis); }

.lp-trust { background: linear-gradient(155deg, var(--green-700), var(--green-900)); }
.lp-trust__h2 { color: #fff; }
.lp-trust__lead { color: rgba(255, 255, 255, 0.88); }

.lp-final__panel { border: 0; background: var(--gold-400); box-shadow: none; }
.lp-final__panel :is(.lp-section__h2, .lp-section__lead, .landing-eyebrow, .landing-contact-title, .landing-contact-links, .landing-contact-links a) { color: var(--lapis); }
.lp-final__panel .btn.gold { background: var(--lapis); color: #fff; box-shadow: 0 3px 0 #060C2E; }
.lp-final__panel .btn.gold:hover { background: var(--lapis-2); color: #fff; }
.lp-final__panel .btn.ghost { background: transparent; color: var(--lapis); border-color: var(--lapis); box-shadow: 0 3px 0 var(--lapis); }
.lp-final__panel .btn.ghost:hover { background: rgba(255, 255, 255, 0.35); color: var(--lapis); }
.lp-final__panel .landing-contact { border-top-color: rgba(16, 30, 94, 0.25); }

.landing-footer { background: linear-gradient(180deg, var(--lapis), #0B1546); border-top: 0; color: rgba(255, 255, 255, 0.78); }

/* ---------- Contact Sales, Book a Demo ---------- */
.sales-page {
  --panel: var(--lapis);
  --panel-accent: var(--gold-300);
  --panel-star: var(--cobalt);
  min-height: 100vh;
  background: #fff;
  color: var(--lapis);
  font-family: var(--font-ui);
}
.sales-page--demo { --panel: var(--turquoise); --panel-accent: #9CF0EE; --panel-star: #0E8A97; --c: var(--turquoise); --c-hi: var(--turquoise-hi); }

.sales-page__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 12px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.sales-page__brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--lapis); text-decoration: none; }
.sales-page__brand:hover { color: var(--cobalt); text-decoration: none; }
.sales-page__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--gold-400); color: var(--lapis); font-family: var(--font-display); font-weight: 700; }
.sales-page__links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 0.92rem; }
.sales-page__links a:not(.btn) { padding-block: 6px; border-bottom: 3px solid transparent; color: var(--ink-2); font-weight: 600; text-decoration: none; }
.sales-page__links a:not(.btn):hover { color: var(--c); }
.sales-page__links a[aria-current="page"] { border-bottom-color: var(--c); color: var(--c); }

/* Colour column on the left, form on the right. On a phone the form comes
   straight after the heading and "what happens next" follows it. */
.sales-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "intro form" "next form";
  min-height: calc(100vh - 66px);
  background: linear-gradient(90deg, var(--panel) calc(5 / 12 * 100%), #fff 0);
}
.sales-intro, .sales-next { color: #fff; padding-inline: clamp(20px, 4vw, 56px); }
.sales-intro { grid-area: intro; padding-block: clamp(32px, 6vh, 64px) 28px; position: relative; overflow: hidden; }
.sales-intro::after {
  content: "";
  position: absolute;
  top: -44px;
  right: -44px;
  width: 170px;
  aspect-ratio: 1;
  background: var(--panel-star);
  clip-path: var(--star-clip);
}
.sales-intro > * { position: relative; z-index: 1; }
.sales-page__title { margin: 0 0 12px; font-family: var(--font-display); font-size: clamp(2.3rem, 4.4vw, 3.4rem); line-height: 1.04; letter-spacing: -0.03em; color: #fff; }
.sales-page__lead { margin: 0; max-width: 42ch; font-size: 1.05rem; line-height: 1.55; color: rgba(255, 255, 255, 0.88); }

.sales-next { grid-area: next; padding-block: 0 clamp(32px, 6vh, 56px); }
.sales-next__title { margin: 0 0 16px; font-family: var(--font-display); font-size: 1.25rem; color: var(--panel-accent); }
.sales-next__steps { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: sales-step; }
.sales-next__steps li { position: relative; counter-increment: sales-step; padding: 0 0 20px 52px; }
.sales-next__steps li:last-child { padding-bottom: 0; }
.sales-next__steps li::before {
  content: counter(sales-step);
  position: absolute;
  left: 0;
  top: -3px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--panel-accent);
  clip-path: var(--star-clip);
  color: var(--lapis);
  font-size: 0.86rem;
  font-weight: 800;
}
.sales-next__steps li:nth-child(2)::before { background: var(--tomato-hi); }
.sales-next__steps li:nth-child(3)::before { background: var(--emerald-hi); }
.sales-next__steps b { display: block; margin-bottom: 2px; font-size: 1rem; color: #fff; }
.sales-next__steps p { margin: 0; max-width: 40ch; font-size: 0.92rem; line-height: 1.45; color: rgba(255, 255, 255, 0.84); }
.sales-next__note { margin: 0 0 14px; padding-top: 16px; max-width: 46ch; border-top: 1px solid rgba(255, 255, 255, 0.22); font-size: 0.88rem; line-height: 1.5; color: rgba(255, 255, 255, 0.8); }
.sales-aside__contact { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.84); }
.sales-aside__contact a { color: var(--panel-accent); font-weight: 600; }
.sales-aside__contact a:hover { color: #fff; }

.sales-page__panel { grid-area: form; align-self: start; width: 100%; max-width: 760px; padding: clamp(24px, 5vh, 48px) clamp(20px, 4vw, 56px); }
.sales-form__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-bottom: 20px; }
.sales-form__heading { margin: 0; font-family: var(--font-display); font-size: 1.55rem; color: var(--lapis); }

/* One star per required detail, lit as the form fills in. */
.sales-stars { display: inline-flex; align-items: center; gap: 10px; }
.sales-stars__row { display: inline-flex; gap: 4px; }
.sales-star { width: 20px; height: 20px; background: var(--line); clip-path: var(--star-clip); transition: background 0.16s; }
.sales-star.is-lit { background: var(--gold-500); animation: mzPop 0.34s cubic-bezier(0.3, 1.7, 0.5, 1); }
.sales-star.is-lit:nth-child(2) { background: var(--tomato); }
.sales-star.is-lit:nth-child(3) { background: var(--c); }
.sales-stars__text { font-size: 0.84rem; font-weight: 600; color: var(--ink-2); }

.sales-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sales-form__full { grid-column: 1 / -1; }
.sales-form .form-group { margin-bottom: 0; min-width: 0; }
.sales-form label, .sales-form legend { font-size: 0.88rem; font-weight: 600; color: var(--lapis); }
.sales-form__opt { font-weight: 500; color: var(--ink-3); }
.sales-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.sales-form legend { margin-bottom: 8px; padding: 0; }

.sales-plans__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sales-form label.sales-plan { --c: var(--emerald); position: relative; display: block; margin: 0; cursor: pointer; }
.sales-plan:nth-child(2) { --c: var(--cobalt); }
.sales-plan:nth-child(3) { --c: var(--tomato); }
.sales-plan:nth-child(4) { --c: var(--plum); }
.sales-plan input, .sales-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sales-plan__body { display: block; height: 100%; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; background: #fff; transition: border-color 0.15s, background 0.15s; }
.sales-plan__body b { display: block; font-size: 0.92rem; color: var(--c); }
.sales-plan__body small { display: block; margin-top: 2px; font-size: 0.76rem; font-weight: 500; line-height: 1.3; color: var(--ink-3); }
.sales-plan:hover .sales-plan__body { border-color: var(--c); }
.sales-plan input:checked + .sales-plan__body { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); box-shadow: 0 3px 0 var(--c); }
.sales-plan input:focus-visible + .sales-plan__body, .sales-chip input:focus-visible + span { outline: 3px solid var(--c); outline-offset: 2px; }

.sales-focus__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sales-form label.sales-chip { position: relative; margin: 0; cursor: pointer; }
.sales-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 2px solid var(--line); border-radius: 999px; font-size: 0.88rem; font-weight: 600; color: var(--ink-2); transition: border-color 0.15s, background 0.15s, color 0.15s; }
.sales-chip:hover span { border-color: var(--c); color: var(--c); }
.sales-chip input:checked + span { border-color: var(--c); background: var(--c); color: #fff; }

.sales-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; }
.sales-form__submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.sales-form__submit-ico { display: inline-flex; width: 18px; height: 18px; }
.sales-form__submit svg { width: 18px; height: 18px; }
.sales-form__note { margin: 0; font-size: 0.9rem; color: var(--ink-2); }
.sales-form__note a { color: var(--c); font-weight: 600; }

.sales-success { padding-block: clamp(20px, 8vh, 64px); max-width: 520px; }
.sales-success__mark { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 18px; background: var(--gold-400); clip-path: var(--star-clip); color: var(--lapis); animation: mzPop 0.5s cubic-bezier(0.3, 1.7, 0.5, 1); }
.sales-success__mark svg { width: 34px; height: 34px; }
.sales-success h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 2rem; color: var(--lapis); }
.sales-success__lead { margin: 0 0 22px; line-height: 1.6; color: var(--ink-2); }
.sales-success__actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 880px) {
  .sales-page__layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "intro" "form" "next"; min-height: 0; background: #fff; }
  .sales-intro, .sales-next { background: var(--panel); }
  .sales-intro { padding-block: 28px; }
  .sales-intro::after { width: 110px; top: -34px; right: -30px; }
  .sales-next { padding-block: 28px; }
  .sales-page__panel { max-width: none; }
}
@media (max-width: 560px) {
  .sales-form__grid { grid-template-columns: minmax(0, 1fr); }
  .sales-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sales-form__submit { width: 100%; }
  .sales-page__nav { padding-block: 10px; }
}

.billing-page[aria-busy="true"] button:disabled { opacity: 0.55; cursor: progress; }

/* ---------- Sign-in, password reset, missing portal ---------- */
.auth-hero { background: linear-gradient(170deg, var(--lapis) 0%, #0B1546 100%); }
.auth-hero::before {
  inset: auto -70px -70px auto;
  width: 300px;
  height: 300px;
  background: var(--cobalt);
  clip-path: var(--star-clip);
  opacity: 0.6;
}
.auth-hero .highlight:nth-child(2) .dot { background: var(--turquoise-hi); }
.auth-hero .highlight:nth-child(3) .dot { background: var(--tomato-hi); }
.auth-hero-eyebrow { margin-bottom: 18px; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--gold-300); }
.auth-hero-title { margin: 0 0 14px; font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; color: #fff; }
.auth-hero-sub { max-width: 44ch; line-height: 1.6; color: rgba(255, 255, 255, 0.84); }
.auth-hero-arabic { font-family: var(--font-arabic); font-size: 1.7rem; line-height: 1.7; color: var(--gold-300); direction: rtl; text-align: right; }
.auth-hero-trans { margin-top: 6px; color: rgba(255, 255, 255, 0.84); }
.auth-hero-cite { margin-top: 2px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.66); }
.auth-form-wrap { background: var(--cream); }
.auth-card h2 { color: var(--lapis) !important; }
/* The small line above each card heading is set inline in many places. */
.auth-card > .muted:first-child { color: var(--cobalt) !important; font-size: 0.92rem !important; font-weight: 700; letter-spacing: 0 !important; text-transform: none !important; }
.auth-card[data-testid="auth-action-error"] > .muted:first-child { color: var(--danger) !important; }

/* Phones: the form comes first. A school portal keeps its name and logo. */
@media (max-width: 960px) {
  .auth-hero { display: flex; padding: 18px 20px; }
  .auth-hero::before, .auth-hero .highlights, .auth-hero .ayah, .auth-hero > .link-muted, .auth-hero:not(.auth-hero--school) :is(h1, p) { display: none; }
  .auth-hero .brand { margin-bottom: 0; }
  .auth-hero--school h1 { font-size: 1.6rem !important; margin-bottom: 0; }
  [data-testid="auth-action-page"] .auth-hero { display: none; }
}

.portal-missing { min-height: 100vh; background: linear-gradient(170deg, var(--lapis) 0%, #0B1546 100%); padding: 16px; }
.portal-missing__star { width: 64px; height: 64px; margin: 0 auto 14px; background: var(--tomato-hi); clip-path: var(--star-clip); }
.portal-missing__title { margin: 0; font-family: var(--font-display); font-size: 1.7rem; color: var(--lapis); }

/* ---------- Tour ---------- */
.ht-tour-root {
  --tour-cream: #fff;
  --tour-ink: var(--lapis);
  --tour-ink-2: var(--lapis);
  --tour-gold: var(--gold-500);
  --tour-gold-2: var(--gold-300);
  --tour-muted: var(--ink-2);
  --tour-line: var(--line);
}
html[data-theme="dark"] .ht-tour-root { --tour-cream: #141E46; --tour-ink: #fff; --tour-ink-2: #fff; --tour-muted: #C6D1E6; --tour-line: rgba(255, 255, 255, 0.18); }
.ht-tour-modal__hero { background: linear-gradient(170deg, var(--lapis) 0%, #0B1546 100%); }
.ht-tour-modal__hero::after { display: none; }
.ht-tour-modal__title { color: #fff; }
.ht-tour-modal__title em { color: var(--gold-300); }
.ht-tour-modal__eyebrow { border: 0; padding: 0; background: none; color: var(--gold-300); font-size: 0.9rem; letter-spacing: 0; text-transform: none; }
.ht-tour-modal__item { border-color: var(--line); background: #fff; }
.ht-tour-modal__ico { background: var(--gold-400); color: var(--lapis); clip-path: var(--star-clip); border-radius: 0; box-shadow: none; }
.ht-tour-modal__item:nth-child(2) .ht-tour-modal__ico { background: var(--turquoise-hi); }
.ht-tour-modal__item:nth-child(3) .ht-tour-modal__ico { background: var(--tomato-hi); }
.ht-btn--gold, .ht-btn--gold:hover { background: var(--gold-400); color: var(--lapis); box-shadow: 0 3px 0 var(--gold-600); }
.ht-tour-launcher { background: #fff; color: var(--lapis); border-color: var(--line-2); box-shadow: 0 3px 0 var(--line-2); }
.ht-tour-launcher__dot { background: var(--gold-400); color: var(--lapis); }
/* On the home page it sits over the star grid: just the "?" until asked. */
body:has(.landing-page) .ht-tour-launcher { left: 10px; padding: 6px; }
body:has(.landing-page) .ht-tour-launcher__label { display: none; }
body:has(.landing-page) .ht-tour-launcher:is(:hover, :focus-visible) { padding-right: 14px; }
body:has(.landing-page) .ht-tour-launcher:is(:hover, :focus-visible) .ht-tour-launcher__label { display: inline; }
.ht-tour-tip__title em { color: var(--cobalt); }
html[data-theme="dark"] .ht-tour-tip__title em { color: var(--gold-300); }

@media (max-width: 860px) {
  .lp-hero__content { grid-template-columns: 1fr; }
  /* Centred, and tall enough for the longest verse so the stars never move. */
  .lp-hero__ayah { min-height: 12rem; text-align: center; }
  .lp-hero__ayah blockquote { text-align: center; }
  .mz__grid { grid-template-columns: repeat(10, minmax(0, 1fr)); max-width: none; }
  .mz__star { font-size: 0.68rem; }
  .lp-roles__band { flex-direction: column; }
  .lp-features { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .progress > span, .mz__star.is-lit, .sales-star.is-lit, .sales-success__mark { animation: none; }
  .sales-star, .sales-plan__body, .sales-chip span, .lp-hero__verse { transition: none; }
  .today-session-tile, .mz__star, .lp-feature, .lp-feature__ico, .lp-feature__ico svg, .lp-roles__cell, .nav-item__ico, .btn, .card { transition: none; }
  .lp-feature:hover, .lp-feature:hover .lp-feature__ico, .lp-feature:hover .lp-feature__ico svg,
  .mz__star:hover, .mz__star:focus-visible, .nav-item:hover .nav-item__ico,
  .today-session-tile:hover, .card:has(> .card-value):hover, .btn:hover, .btn:active { transform: none; }
}