/* ============================================================
   Hajify, shared stylesheet
   Palette + radii + type ramp extracted verbatim from the app's
   Flutter theme (lib/src/theme/app_theme.dart, SHO-TH00).
   ============================================================ */

:root {
  /* HajifyThemeTokens, SHO-TH00 "Default Light" */
  --screen: #FAFAF5;
  --ink: #0E3B2C;
  --sub: rgba(14, 59, 44, 0.72);
  --dim: rgba(14, 59, 44, 0.52);
  --faint: rgba(14, 59, 44, 0.38);
  --card: #FFFFFF;
  --inset: #F0F1EA;
  --sheet: #FBFBF6;
  --line: #E4E3D6;
  --nav: rgba(255, 255, 255, 0.94);
  --chrome: #EFEBD8; /* shared header/footer surface */
  --flame: #B0852B;
  --gold: #9C7320;
  --gold-soft: #F1E4C4;
  --accent: #1C7A52;
  --accent-soft: rgba(28, 122, 82, 0.10);

  /* HajifyTileColors SHO-TH00 tileA, the dark Journey hero tile */
  --cream: #FDFBF3;        /* on-dark body text */
  --cream-hover: #F4E6BE;  /* on-dark link/button hover */
  --accent-deep: #166242;  /* primary button hover */
  --tile-bg: #0F3D2C;
  --tile-ink: #EBD9A6;
  --tile-dim: rgba(235, 217, 166, 0.72);
  --tile-line: rgba(235, 217, 166, 0.34);

  /* Journey-map reference colours (journey_map_feature_page.dart, light) */
  --route-green: #1B8F5A;
  --route-gold: #B0852B; /* = --flame */
  --node-done: #16795B;      /* lerp(#15795A, accent, .18) */
  --lock-fill: #F2EFE8;
  --lock-border: #DCD5C8;
  --lock-ink: #A79F92;
  --map-title-ink: #15301F;
  --map-sub-ink: #8C8A82;

  --font-body: "Gantari", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Marcellus", Georgia, serif;
  --font-arabic: "Amiri Quran", "Amiri", serif;

  --content-w: 1120px;
  --r-btn: 18px;   /* button/input radius from ThemeData */
  --r-card: 20px;
  --r-sheet: 28px;
}

@font-face {
  font-family: "Amiri Quran";
  src: url("assets/fonts/AmiriQuran.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  margin: 0;
  /* Layered atmosphere: green + gold washes over the app's screen tone */
  background:
    radial-gradient(1100px 620px at 88% -120px, rgba(28, 122, 82, 0.13), transparent 70%),
    radial-gradient(900px 720px at -160px 42%, rgba(176, 133, 43, 0.11), transparent 70%),
    radial-gradient(760px 560px at 55% 30%, rgba(235, 217, 166, 0.16), transparent 72%),
    radial-gradient(1000px 800px at 108% 88%, rgba(28, 122, 82, 0.10), transparent 70%),
    linear-gradient(178deg, #FBFAF2 0%, #F6F4E8 46%, #F4F1E3 100%);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* fixed geometric lattice + grain, painted behind all content */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* diamond lattice, two crossed hairline diagonals */
    repeating-linear-gradient(45deg, rgba(14, 59, 44, 0.05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(-45deg, rgba(14, 59, 44, 0.05) 0 1px, transparent 1px 56px),
    /* gold node at each lattice crossing */
    radial-gradient(rgba(156, 115, 32, 0.20) 1.4px, transparent 1.6px);
  background-size: 79px 79px, 79px 79px, 79px 79px;
  background-position: 0 0, 0 0, 39.5px 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.6) 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.6) 100%);
}
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--gold); }
img, svg, video { display: block; max-width: 100%; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 { margin: 0; text-wrap: balance; }

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--tile-bg);
  color: var(--cream);
  padding: 12px 18px;
  border-radius: 0 0 12px 12px;
  font-weight: 700;
  text-decoration: none;
  transition: top 160ms ease;
}
.skip-link:focus-visible { top: 0; color: var(--cream); }

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

.wrap {
  width: 100%;
  max-width: var(--content-w);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Material Symbols (Flutter's rounded icon set) */
.msr {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  letter-spacing: normal;
  white-space: nowrap;
  direction: ltr;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
  text-transform: none;
  user-select: none;
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--tile-bg);
  border-bottom: 1px solid rgba(235, 217, 166, 0.28);
}
.site-header .wordmark { color: var(--cream); }
.site-header .wordmark:hover { color: var(--tile-ink); }
.site-header .wordmark svg rect { fill: rgba(235, 217, 166, 0.16); }
.site-header .btn-primary { background: var(--tile-ink); color: var(--tile-bg); }
.site-header .btn-primary:hover { background: var(--cream-hover); color: var(--tile-bg); }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 88px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.wordmark:hover { color: var(--ink); }
.wordmark svg, .wordmark img { flex: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 700 0.95rem/1 var(--font-body);
  padding: 14px 22px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); color: #fff; }
.btn-primary:active { transform: translateY(1px); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { border-color: var(--accent); color: var(--accent); }
.site-header .btn { padding: 11px 18px; white-space: nowrap; }
.btn .lbl-short { display: none; }
/* ---------- journey spine (signature element) ---------- */
.spine-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
main { position: relative; }
main > * { position: relative; z-index: 1; }
.spine-anchor { /* invisible measurement targets for the spine path */
  display: block;
  width: 1px; height: 1px;
}

/* ---------- hero ---------- */
.hero { padding: clamp(48px, 9vh, 96px) 0 clamp(40px, 7vh, 72px); }
.hero-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}
.eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.35rem, 8.6vw, 4.1rem);
  line-height: 1.06;
  color: var(--ink);
}
.hero .sub {
  font-size: clamp(1.02rem, 2.4vw, 1.2rem);
  color: var(--sub);
  max-width: 34em;
  margin-top: 18px;
}

/* ---------- email capture ---------- */
.capture {
  margin-top: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 20px;
  max-width: 560px;
  box-shadow: 0 14px 34px -20px rgba(40, 36, 28, 0.35);
}
.capture .incentive { font-size: 0.95rem; color: var(--sub); margin: 0 0 14px; }
.capture .incentive strong { color: var(--ink); }
.capture-row { display: flex; flex-wrap: wrap; gap: 10px; }
.capture input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  font: 500 1rem/1.2 var(--font-body);
  color: var(--ink);
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 15px 18px;
}
.capture input[type="email"]::placeholder { color: var(--dim); }
.capture input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1.5px var(--accent);
}
.capture .btn { flex: 0 0 auto; }
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--sub);
  line-height: 1.5;
}
.consent input[type="checkbox"] {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}
.consent-error {
  display: none;
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #8C3B2E;
}
.form-msg { display: none; margin-top: 12px; font-size: 0.9rem; line-height: 1.5; border-radius: 14px; padding: 12px 14px; }
.form-msg.success { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--ink); }
.form-msg.error { background: #F7ECE7; border: 1px solid #C97B5F; color: #6E3325; }
.reassure { margin: 10px 0 0; font-size: 0.8rem; color: var(--faint); }
.alt-channel { margin: 14px 0 0; font-size: 0.88rem; color: var(--sub); }

/* dark variant (final CTA) */
.capture.on-dark { background: rgba(255, 255, 255, 0.04); border-color: var(--tile-line); box-shadow: none; }
.capture.on-dark .incentive { color: var(--tile-dim); }
.capture.on-dark .incentive strong { color: var(--tile-ink); }
.capture.on-dark input[type="email"] {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--tile-line);
  color: var(--cream);
}
.capture.on-dark input[type="email"]::placeholder { color: var(--tile-dim); }
.capture.on-dark .consent, .capture.on-dark .alt-channel { color: var(--tile-dim); }
.capture.on-dark .consent a, .capture.on-dark .alt-channel a { color: var(--tile-ink); }
.capture.on-dark .reassure { color: rgba(235, 217, 166, 0.55); }
.capture.on-dark .btn-primary { background: var(--tile-ink); color: var(--tile-bg); }
.capture.on-dark .btn-primary:hover { background: var(--cream-hover); color: var(--tile-bg); }
.capture.on-dark .form-msg.success { background: rgba(235, 217, 166, 0.12); border-color: var(--tile-line); color: var(--tile-ink); }
.capture.on-dark .consent-error { color: #E7B5A3; }

/* ---------- sections ---------- */
.section { padding: clamp(56px, 10vh, 110px) 0; }
/* anchored jumps land clear of the sticky header */
section[id], form[id] { scroll-margin-top: 84px; }
.section-head {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(28px, 5vh, 48px);
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 5vw, 2.6rem);
  line-height: 1.12;
}
.section-head .lede { color: var(--sub); margin-top: 12px; font-size: 1.02rem; }
/* gold thread under every section heading */
.section-head::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin: 22px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  opacity: 0.75;
}
.section-head .lede + * { margin-top: 0; }

/* pain points */
.pain-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.pain-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px 22px;
}
.pain-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  margin-bottom: 10px;
}
.pain-card p { margin: 0; color: var(--sub); font-size: 0.95rem; }
.pain-card { border-top: 2px solid var(--gold-soft); }
.pain-card .k {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 19px;
  margin-bottom: 14px;
}

/* mission */
.mission-block {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold-soft);
  border-radius: var(--r-sheet);
  padding: clamp(24px, 4vw, 40px);
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}
.mission-block p { max-width: 44em; margin-inline: auto; }
.mission-block .lead {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.4vw, 1.8rem);
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 18px;
}
.mission-block p { color: var(--sub); }
.mission-block p:last-child { margin-bottom: 0; }

/* ---------- showcase ---------- */
.showcase-feature {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 28px;
  align-items: center;
  margin-bottom: clamp(40px, 7vh, 72px);
}
@media (min-width: 860px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
}

/* hero companion phone (desktop only) */
.hero-phone { display: none; }
@media (min-width: 860px) {
  .hero-phone {
    display: block;
    position: relative;
    justify-self: center;
  }
  .hero-phone::before {
    content: "";
    position: absolute;
    inset: -12% -18%;
    border-radius: 50%;
    background:
      radial-gradient(closest-side, rgba(28, 122, 82, 0.13), rgba(235, 217, 166, 0.10) 58%, transparent 74%);
    z-index: -1;
  }
  .hero-phone .phone { transform: rotate(2.25deg); }
}
.caption {
  font-size: 0.95rem;
  color: var(--sub);
  margin: 14px 0 0;
  max-width: 300px;
}
.caption strong { color: var(--ink); }

.render-row {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 8px 4px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.render-item { scroll-snap-align: center; flex: none; }
@media (min-width: 1280px) {
  .render-row { flex-wrap: wrap; justify-content: center; overflow: visible; }
}

/* ---------- phone frame ---------- */
.phone {
  width: 300px;
  flex: none;
  background: #121712;
  border-radius: 56px;
  padding: 9px;
  box-shadow:
    0 30px 60px -28px rgba(20, 30, 24, 0.5),
    inset 0 0 0 2px rgba(255, 255, 255, 0.06);
}
.phone-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 282 / 612; /* iPhone 17 Pro Max aspect (~1:2.17) */
  border-radius: 47px;
  overflow: hidden;
  background: var(--screen);
}
/* Dynamic Island */
.phone-screen::after, .video-shell::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 27px;
  border-radius: 999px;
  background: #0B0E0B;
  z-index: 5;
  pointer-events: none;
}
.phone.phone-video .phone-screen { background: var(--tile-bg); }
.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 30px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.statusbar .cell {
  display: inline-flex; gap: 3px; align-items: flex-end;
}
.statusbar .cell i {
  display: block; width: 3px; border-radius: 1px; background: currentColor;
}
.statusbar .cell i:nth-child(1) { height: 4px; }
.statusbar .cell i:nth-child(2) { height: 6px; }
.statusbar .cell i:nth-child(3) { height: 8px; }
.statusbar .cell i:nth-child(4) { height: 10px; opacity: 0.35; }
.statusbar .batt {
  width: 22px; height: 11px;
  border: 1.5px solid currentColor;
  border-radius: 3.5px;
  position: relative;
  opacity: 0.9;
}
.statusbar .batt::after {
  content: ""; position: absolute; inset: 1.5px 30% 1.5px 1.5px;
  background: currentColor; border-radius: 1px;
}

/* real app screenshots (captured from the Flutter widget tree, assets/renders/NOTES.md) */
.phone-screen .shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.statusbar { position: relative; } /* paints over the screenshot's empty SafeArea band */

/* ---------- video treatment ---------- */
.phone.phone-video { width: min(630px, 100%); }
.video-shell { position: relative; width: 100%; aspect-ratio: 19.5 / 9; border-radius: 47px; overflow: hidden; background: var(--tile-bg); }
/* landscape: Dynamic Island sits on the left edge */
.video-shell::after {
  top: 50% !important;
  left: 11px !important;
  transform: translateY(-50%) !important;
  width: 27px !important;
  height: 96px !important;
}
.video-shell video, .video-shell img.poster { width: 100%; height: 100%; object-fit: cover; }
.unmute-btn {
  position: absolute;
  right: 14px; bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(15, 61, 44, 0.82);
  color: var(--tile-ink);
  border: 1px solid var(--tile-line);
  border-radius: 999px;
  padding: 9px 14px;
  font: 700 12px/1 var(--font-body);
  cursor: pointer;
}
.unmute-btn:hover { background: rgba(15, 61, 44, 0.95); }

/* ---------- final CTA ---------- */
.final-cta {
  text-align: center;
  max-width: 840px;
  margin-inline: auto;
  background: var(--tile-bg);
  color: var(--cream);
  border-radius: var(--r-sheet);
  padding: clamp(28px, 4vw, 44px);
  position: relative;
  overflow: hidden;
}
.final-cta { border-top: 2px solid rgba(235, 217, 166, 0.45); }
.final-cta .eyebrow { color: var(--tile-ink); }
.final-cta h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5.4vw, 2.9rem);
  line-height: 1.1;
  color: var(--cream);
}
.final-cta .lede { color: var(--tile-dim); margin-top: 12px; max-width: 34em; margin-inline: auto; }
.final-cta .capture {
  max-width: none;
  margin-inline: auto;
  text-align: left;
}
/* The on-dark text colours hang off `.capture`, so a paragraph placed beside
   the form rather than inside it fell back to the light theme's dark green ink
   and vanished into the tile. The tile sets the colour its own children
   inherit, so anything added here later is legible by default. */
.final-cta { color: var(--tile-dim); }
.final-cta .alt-channel { color: var(--tile-dim); }
.final-cta a { color: var(--tile-ink); }
.final-cta a:hover { color: var(--cream-hover); }

/* ---------- footer ---------- */
.site-footer {
  background: var(--tile-bg);
  border-top: none;
  margin-top: clamp(56px, 9vh, 100px);
  padding: 56px 0 44px;
  font-size: 0.88rem;
  color: var(--tile-dim);
}
.site-footer .wordmark { color: var(--cream); }
.site-footer .wordmark:hover { color: var(--tile-ink); }
.site-footer .wordmark svg rect { fill: rgba(235, 217, 166, 0.16); }
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px 40px;
}
.footer-brand { max-width: 34em; }
.footer-brand p { margin: 12px 0 0; }
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  max-width: 34em;
}
@media (min-width: 720px) { .footer-links { padding-top: 10px; justify-content: flex-end; } }
.site-footer h3 {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(235, 217, 166, 0.6);
  margin-bottom: 14px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--tile-dim); }
.site-footer a:hover { color: var(--tile-ink); }
.footer-legal {
  border-top: 1px solid rgba(235, 217, 166, 0.28);
  margin-top: 36px;
  padding-top: 22px;
  font-size: 0.8rem;
  color: rgba(235, 217, 166, 0.55);
  display: grid;
  gap: 6px;
}

/* ---------- tweak variants ---------- */
body.no-lattice::before { display: none; }
body.chrome-light .site-header {
  background: var(--chrome);
  border-bottom: 1px solid var(--line);
}
body.chrome-light .site-header .wordmark { color: var(--ink); }
body.chrome-light .site-header .wordmark:hover { color: var(--ink); }
body.chrome-light .site-header .wordmark svg rect { fill: #0F3D2C; }
body.chrome-light .site-header .btn-primary { background: var(--accent); color: #fff; }
body.chrome-light .site-header .btn-primary:hover { background: var(--accent-deep); color: #fff; }
body.chrome-light .site-footer {
  background: var(--chrome);
  border-top: 1px solid var(--line);
  color: var(--sub);
}
body.chrome-light .site-footer .wordmark { color: var(--ink); }
body.chrome-light .site-footer .wordmark svg rect { fill: #0F3D2C; }
body.chrome-light .site-footer h3 { color: var(--faint); }
body.chrome-light .site-footer a { color: var(--sub); }
body.chrome-light .site-footer a:hover { color: var(--accent); }
body.chrome-light .site-footer .footer-legal { border-top-color: var(--line); color: var(--faint); }
body.chrome-light .site-footer [style*="--tile-ink"] { color: var(--ink) !important; }

/* ---------- cookie banner ---------- */
.cookie-banner {
  position: fixed;
  z-index: 100;
  inset-inline: 12px;
  bottom: 12px;
  max-width: 560px;
  margin-inline: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 24px 60px -20px rgba(40, 36, 28, 0.45);
  padding: 20px;
  display: none;
}
.cookie-banner.open { display: block; }
.cookie-banner p { font-size: 0.88rem; color: var(--sub); margin: 0 0 14px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .btn { flex: 1 1 160px; padding: 12px 16px; font-size: 0.88rem; }

/* ---------- legal pages ---------- */
.legal-main { max-width: 760px; margin-inline: auto; padding: 40px 20px 80px; }
.legal-note {
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  color: #6B4E14;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 28px;
}
.legal-main h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  margin-bottom: 6px;
}
.legal-main .updated { color: var(--faint); font-size: 0.88rem; margin-bottom: 32px; }
.legal-main h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  margin: 36px 0 10px;
}
.legal-main h3 { font-size: 1rem; font-weight: 700; margin: 24px 0 8px; }
.legal-main p, .legal-main li { color: var(--sub); font-size: 0.95rem; }
.legal-main ul { padding-left: 22px; }
.legal-main li { margin-bottom: 6px; }
.legal-main table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.legal-main th, .legal-main td { text-align: left; padding: 8px 10px; border: 1px solid var(--line); color: var(--sub); vertical-align: top; }
.legal-main th { background: var(--inset); color: var(--ink); }
.placeholder { background: var(--gold-soft); border-radius: 4px; padding: 0 4px; font-family: monospace; font-size: 0.9em; color: #6B4E14; }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 640ms ease, transform 640ms cubic-bezier(0.22, 0.9, 0.3, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Responsive, mobile redesign layer
   Desktop (>700px wide, >520px tall) is untouched. Same palette,
   same content, re-presented app-first for phones, portrait and
   landscape.
   ============================================================ */

/* --- mobile-only chrome, hidden on desktop --- */
.cta-dock {
  position: fixed;
  z-index: 70;
  inset-inline: 0;
  bottom: 0;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--tile-bg) 90%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(235, 217, 166, 0.22);
  transform: translateY(0);
  transition: transform 240ms ease;
}
body.dock-away .cta-dock { transform: translateY(110%); }
.cta-dock .btn-primary { flex: 1; padding: 15px 18px; background: var(--tile-ink); color: var(--tile-bg); }
.cta-dock .btn-primary:hover { background: var(--cream-hover); color: var(--tile-bg); }
.cta-dock .dock-note { display: none; }
.shelf-dots { display: none; }

/* The journey spine needs a real side gutter; below the two-column
   breakpoint it hugs the viewport edge as clipped clutter. (script.js
   also skips drawing it whenever the gutter is too narrow.) */
@media (max-width: 859px) {
  .spine-svg { display: none; }
}

/* ============================================================
   PORTRAIT PHONES + SMALL TABLETS (≤700px wide)
   ============================================================ */
@media (max-width: 700px) {
  /* --- fluid type: root font-size scales with viewport width, so the
         whole rem-based ramp breathes with the screen --- */
  html { font-size: clamp(14.25px, 12px + 0.9vw, 16px); }
  /* iOS zooms the page if a focused input is under 16px, pin it */
  .capture input[type="email"] { font-size: 16px; }

  /* --- compact header: wordmark + theme toggle; the CTA moves to
         the bottom dock on pages that have one --- */
  .site-header .wrap { min-height: 60px; gap: 10px; }
  .site-header .wordmark { font-size: 1.2rem; gap: 8px; }
  .site-header .wordmark img { width: 27px; height: 27px; }
  .site-header .btn { padding: 10px 15px; font-size: 0.84rem; }
  section[id], form[id] { scroll-margin-top: 72px; }

  /* --- mobile type ramp: bigger display sizes, tighter leading --- */
  .eyebrow { font-size: 0.66rem; letter-spacing: 0.18em; }
  .hero h1 { font-size: clamp(1.8rem, 7.8vw, 2.3rem); line-height: 1.12; }
  .hero .sub { font-size: 0.97rem; }
  .section-head h2 { font-size: clamp(1.4rem, 5.8vw, 1.75rem); }
  .section-head .lede { font-size: 0.93rem; }
  .section-head::after { margin-top: 18px; }

  /* --- generous vertical rhythm: the airiness IS the design.
         Sections breathe like desktop; density never signals mobile. --- */
  .hero { padding: 52px 0 44px; }
  .section { padding: 76px 0; }
  .section-head { margin-bottom: 36px; }
  .site-footer { margin-top: 68px; padding: 54px 0 38px; }

  /* --- pain points: cards become scannable icon rows --- */
  .pain-grid { gap: 14px; grid-template-columns: 1fr; }
  .pain-card {
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 14px;
    align-items: start;
    padding: 20px 18px 20px 16px;
    border-radius: 16px;
  }
  .pain-card .k { grid-row: 1 / 3; margin-bottom: 0; margin-top: 2px; }
  .pain-card h3 { font-size: 1.06rem; margin-bottom: 4px; }
  .pain-card p { font-size: 0.9rem; }

  /* --- mission: left-aligned sheet (centered paragraphs read badly
         at narrow measure) --- */
  .mission-block { text-align: left; padding: 36px 26px; border-radius: 22px; }
  .mission-block .lead { font-size: clamp(1.15rem, 4.5vw, 1.35rem); }
  .mission-block p { margin-inline: 0; }

  /* --- gameplay video: our clip is 19.5:9 (matches the desktop
         shell) so the aspect stays; only the frame chrome scales
         down. (The handoff's 16:9 override was for its placeholder
         clip, see MOBILE_REDESIGN.md §5.) --- */
  .phone.phone-video { padding: 7px; border-radius: 38px; }
  .video-shell { border-radius: 31px; }
  .video-shell::after {
    left: 8px !important;
    width: 20px !important;
    height: 64px !important;
  }
  .unmute-btn { right: 10px; bottom: 10px; padding: 8px 12px; }
  .showcase-feature { gap: 28px; margin-bottom: 60px; }

  /* --- app shelf: full snap carousel. Fluid phone width leaves a
         ~30px peek of the next screen (signals swipeability); all
         frame chrome scales with the phone via --pw. --- */
  .render-row {
    --pw: min(300px, calc(100vw - 104px));
    gap: 22px;
    padding: 8px 2px 24px;
    scroll-snap-type: x mandatory;
  }
  .render-item { width: var(--pw); }
  .hero-phone { --pw: min(250px, 66vw); }
  .render-item .phone, .hero-phone .phone {
    width: 100%;
    padding: calc(var(--pw) * 0.03);
    border-radius: calc(var(--pw) * 0.187);
  }
  .render-item .phone-screen, .hero-phone .phone-screen { border-radius: calc(var(--pw) * 0.157); }
  .render-item .phone-screen::after, .hero-phone .phone-screen::after {
    top: calc(var(--pw) * 0.037);
    width: calc(var(--pw) * 0.32);
    height: calc(var(--pw) * 0.09);
  }
  .render-item .statusbar, .hero-phone .statusbar {
    padding: calc(var(--pw) * 0.05) calc(var(--pw) * 0.1) 4px;
    font-size: max(9.5px, calc(var(--pw) * 0.04));
  }
  .render-item .caption { margin-inline: auto; }

  /* dots under the shelf (built by script.js) */
  .shelf-dots { display: flex; justify-content: center; gap: 2px; margin-top: 8px; }
  .shelf-dots button {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    background: transparent; border: 0; padding: 0;
    cursor: pointer;
  }
  .shelf-dots button i {
    width: 7px; height: 7px;
    border-radius: 999px;
    background: var(--faint);
    transition: width 200ms ease, background-color 200ms ease;
  }
  .shelf-dots button.active i { width: 20px; background: var(--gold); }

  /* --- final CTA: near-full-bleed sheet, form gets the full width --- */
  .final-cta { padding: 40px 24px 36px; border-radius: 24px; }
  .capture { padding: 18px 16px; }
  .capture .btn { flex: 1 1 100%; }

  /* --- footer: brand full-width, link groups side by side --- */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-legal { font-size: 0.75rem; margin-top: 38px; padding-top: 20px; }
}

/* portrait only (landscape phones keep the header CTA instead):
   show the dock, hide the header CTA on pages that have a dock,
   and reserve room so the dock never covers content */
@media (max-width: 700px) and (min-height: 521px) {
  .cta-dock { display: flex; }
  body:has(.cta-dock) .site-header .btn { display: none; }
  /* keep the cookie banner clear of the dock */
  body:has(.cta-dock) .cookie-banner { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  /* hero app-peek: the Journey render rises from below the fold,
     cropped and fading out, same asset the desktop hero uses */
  .hero { padding-bottom: 10px; }
  .hero-phone {
    margin-top: 46px;
    display: block;
    position: relative;
    width: var(--pw);
    height: min(320px, calc(var(--pw) * 1.32));
    margin-inline: auto;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 99%);
    mask-image: linear-gradient(180deg, #000 68%, transparent 99%);
  }
  .hero-phone::before {
    content: "";
    position: absolute;
    inset: -6% -18% auto;
    height: 120%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(28, 122, 82, 0.13), rgba(235, 217, 166, 0.10) 58%, transparent 74%);
    z-index: -1;
  }
}

@media (max-width: 480px) {
  .hero { padding-top: 44px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .mission-block { border-radius: 20px; }
  .cookie-banner { inset-inline: 10px; bottom: 10px; padding: 16px; }
}


/* very narrow phones: shorter header CTA label (legal pages keep it) */
@media (max-width: 399px) {
  .site-header .btn { padding: 10px 12px; }
  .site-header .btn .lbl-full { display: none; }
  .site-header .btn .lbl-short { display: inline; }
}

/* ============================================================
   LANDSCAPE PHONES (short + wide), scoped away from desktop
   ============================================================ */
@media (max-height: 520px) and (max-width: 1024px) {
  /* fluid root for short screens */
  html { font-size: clamp(14.5px, 13px + 0.4vh, 15.5px); }
  .capture input[type="email"] { font-size: 16px; }

  /* a sticky header would eat a 390px-tall screen */
  .site-header { position: static; }
  section[id], form[id] { scroll-margin-top: 0; }
  .site-header .wrap { min-height: 58px; }
  .cta-dock { display: none !important; }

  /* moderate rhythm: roomier than a screenful, calmer than desktop */
  .hero { padding: 38px 0 44px; }
  .section { padding: 58px 0; }
  .section-head { margin-bottom: 30px; }
  .hero h1 { font-size: clamp(1.85rem, 4.8vw, 2.35rem); }
  .site-footer { margin-top: 56px; padding: 46px 0 34px; }

  /* video sized by the short edge so it never fills past the fold */
  .phone.phone-video { width: min(630px, 100%, calc(100vh * 1.32)); }
  .showcase-feature { margin-bottom: 48px; }

  /* app shelf: smaller phones so frame + caption fit the height */
  .render-row {
    --pw: 230px;
    gap: 20px;
    scroll-snap-type: x mandatory;
  }
  .render-item { width: var(--pw); }
  .render-item .phone {
    width: 100%;
    padding: calc(var(--pw) * 0.03);
    border-radius: calc(var(--pw) * 0.187);
  }
  .render-item .phone-screen { border-radius: calc(var(--pw) * 0.157); }
  .render-item .phone-screen::after {
    top: calc(var(--pw) * 0.037);
    width: calc(var(--pw) * 0.32);
    height: calc(var(--pw) * 0.09);
  }
  .render-item .statusbar {
    padding: calc(var(--pw) * 0.05) calc(var(--pw) * 0.1) 4px;
    font-size: max(9.5px, calc(var(--pw) * 0.04));
  }
  .shelf-dots { display: flex; justify-content: center; gap: 2px; margin-top: -2px; }
  .shelf-dots button { width: 28px; height: 28px; display: grid; place-items: center; background: transparent; border: 0; padding: 0; cursor: pointer; }
  .shelf-dots button i { width: 7px; height: 7px; border-radius: 999px; background: var(--faint); transition: width 200ms ease, background-color 200ms ease; }
  .shelf-dots button.active i { width: 20px; background: var(--gold); }

  /* pain rows: two-up to use the width */
  .pain-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .pain-card { padding: 20px 18px; }

  /* CTA form stays a single row; footer keeps its columns */
  .final-cta { padding: 38px 28px; }
}

/* ============================================================
   COMPANY SITE
   Added when hajify.com stopped being a landing page for the
   Hajify app and became the company's own site, with Arqaan as
   the product. Everything above is unchanged and still serves
   the legal pages, the phone frames and the shared chrome.
   ============================================================ */

/* ---------- hero: statement left, reasoning right ---------- */
.hero:has(.company-hero) { padding-bottom: 8px; }

.company-hero { max-width: none; }
.company-hero-grid {
  display: grid;
  gap: clamp(20px, 3vw, 56px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) {
  .company-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  /* Optical, not mathematical: the display face sits high in its line box, so
     the paragraph needs pushing down to read as level with the first line. */
  .company-hero-side { padding-top: 0.7rem; }
}
.company-hero .sub { max-width: 34em; margin-top: 0; }

/* ---------- the product tile ----------
   Uses the design system's existing dark tile (tileA), the same
   surface the old Journey hero used, so the product block reads
   as part of this site rather than a transplant from Arqaan's. */
.product-tile {
  background: var(--tile-bg);
  color: var(--tile-dim);
  border-radius: var(--r-sheet);
  padding: clamp(28px, 4vw, 52px);
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  box-shadow: 0 34px 70px -46px rgba(14, 59, 44, 0.6);
}
@media (min-width: 900px) {
  .product-tile { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.product-tile .eyebrow { color: var(--tile-ink); }
.product-tile h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.14;
  color: var(--cream);
  margin: 0 0 18px;
}
.product-tile p { color: var(--tile-dim); margin: 0 0 14px; max-width: 40em; }
.product-tile .btn-primary {
  background: var(--tile-ink);
  color: var(--tile-bg);
  margin-top: 10px;
}
.product-tile .btn-primary:hover { background: var(--cream-hover); color: var(--tile-bg); }

/* The Arabic and Latin halves of the Arqaan lockup, as the app sets them. */
.product-mark {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 10px;
}
.product-mark img { width: 34px; height: 34px; border-radius: 9px; flex: none; align-self: center; }
.product-mark [lang="ar"] {
  font-family: "Noto Naskh Arabic", var(--font-arabic);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--tile-ink);
}
.product-mark .latin {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--tile-dim);
}

.product-status {
  border-top: 1px solid var(--tile-line);
  padding-top: 14px;
  font-size: 0.9rem;
  color: var(--tile-ink);
}

.product-shot { display: flex; justify-content: center; }
.product-shot .phone { width: min(280px, 100%); }


/* ---------- the commitments ledger ----------
   A claim on the left, the way to check it on the right. The two
   columns are the point: nothing here is asserted without the
   thing that backs it sitting next to it. */
.ledger { margin: 0; }

.ledger-row {
  display: grid;
  gap: 8px 40px;
  grid-template-columns: minmax(0, 1fr);
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.ledger-row:last-child { border-bottom: 1px solid var(--line); }

@media (min-width: 820px) {
  .ledger-row { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
  /* Line the claim up with the evidence text, not with the CHECK label above it. */
  .ledger-row dt { padding-top: 20px; }
}

.ledger-row dt {
  font-family: var(--font-display);
  padding-top: 0;
  font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.25;
  color: var(--ink);
}
.ledger-row dd {
  margin: 0;
  color: var(--sub);
  font-size: 0.95rem;
  line-height: 1.6;
}

.ledger-k {
  display: block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}




/* ============================================================
   14 September 2026 review: the product tile carries the Arqaan
   site's struggle / answer pair, and the final tile is an
   investor-interest form rather than the early-access list.
   ============================================================ */
.company-hero .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }

.product-pain { display: grid; gap: 18px; margin: 0 0 22px; }
@media (min-width: 640px) { .product-pain { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.product-pain .tag {
  display: block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.product-pain .tag-struggle { color: var(--flame); }
.product-pain .tag-answer { color: var(--tile-ink); }
.product-pain p { margin: 0; max-width: none; }
.product-pain div:last-child p { color: var(--cream); }

.investor-form .field-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .investor-form .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .investor-form .field-wide { grid-column: 1 / -1; }
}
.investor-form .field { display: grid; gap: 6px; }
.investor-form .field > span { font-size: 0.8rem; font-weight: 700; color: var(--tile-ink); }
.investor-form .field em { font-style: normal; font-weight: 500; color: var(--tile-dim); }
.investor-form input[type="text"],
.investor-form input[type="email"],
.investor-form textarea {
  width: 100%;
  min-width: 0;
  font: 500 1rem/1.3 var(--font-body);
  color: var(--cream);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--tile-line);
  border-radius: var(--r-btn);
  padding: 14px 18px;
}
.investor-form textarea { resize: vertical; min-height: 96px; }
.investor-form input:focus, .investor-form textarea:focus {
  outline: none;
  border-color: var(--tile-ink);
  box-shadow: 0 0 0 1.5px var(--tile-ink);
}
.investor-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.investor-form .capture-actions { align-items: center; margin-top: 16px; gap: 10px 18px; }
.investor-form .capture-actions .reassure { margin: 0; flex: 1 1 220px; }