/* Ya Qalbi landing page, single-file CSS, mobile-first, dark forest theme
   matching the iOS app's brand palette. No CSS framework, no build step.

   Color tokens mirror the app's design system so the landing page feels
   continuous with the product itself when users tap through to download. */

:root {
  --bg-deep:      #003A21;          /* deep forest green, primary bg */
  --bg-canvas:    #0E2A1F;          /* canvas tint, used in cards */
  --bg-card:      #143C2C;          /* raised surfaces */
  --line:         #2a4d3c;          /* hairlines */
  --text:         #F4EFE6;          /* off-white body text */
  --text-muted:   #90a497;          /* secondary copy */
  --accent:       #9FE870;          /* lime, the brand pop */
  --accent-warm:  #E8B547;          /* amber, used for highlights */
  --error:        #ff8a8a;
  --success:      #8fd49a;
  --radius:       14px;
  --radius-lg:    18px;
  --shadow-soft:  0 8px 24px rgba(0,0,0,0.35);
  --shadow-pop:   0 12px 32px rgba(159,232,112,0.18);
  --font-sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(circle at top, rgba(159,232,112,0.06), transparent 60%), var(--bg-deep);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.55;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.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;
}

/* ===========================================================================
   Header, minimal, just the brand. Sticky so it stays present as the user
   scrolls past the hero. Translucent background lets the canvas show through.
   =========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 10;
  padding: 14px 24px;
  background: rgba(0, 58, 33, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-name {
  font-size: 22px; font-weight: 900; letter-spacing: -0.01em;
}
.brand-logo { display: block; }

main { flex: 1; }

/* ===========================================================================
   Hero. Stacks on mobile; on ≥780px wide it splits into two columns with the
   phoenix art on the right.
   =========================================================================== */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 48px 24px 32px;
  max-width: 1120px;
  margin: 0 auto;
  align-items: center;
}
.hero-eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero-headline {
  margin: 14px 0 14px;
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.hero-headline .accent { color: var(--accent); }
.hero-sub {
  margin: 0 0 28px;
  font-size: clamp(16px, 2vw, 19px);
  color: var(--text-muted);
  max-width: 56ch;
}

/* Two app-store badges side by side with a generous gap. Each badge is a
   pill with monochrome glyph + two-line label, similar to Apple's
   official badge style but custom-built so we don't need to ship the
   official asset and worry about Apple's branding constraints. */
.cta-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 14px;
}
.store-badge {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 22px 12px 18px;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  font-family: var(--font-sans);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.store-badge:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-pop);
}
.store-badge svg { flex-shrink: 0; }
.store-text { display: flex; flex-direction: column; line-height: 1.05; }
.store-text small { font-size: 11px; opacity: 0.85; font-weight: 500; }
.store-text strong { font-size: 18px; font-weight: 700; letter-spacing: 0.01em; }
.cta-note {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}

/* Phoenix art, three stacked images for a subtle depth effect. The
   front phoenix is the largest and most prominent; mid + back fade out. */
.hero-art {
  position: relative;
  display: grid; place-items: center;
  min-height: 320px;
}
.phx {
  position: absolute;
  width: clamp(180px, 36vw, 320px);
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.6));
  transition: transform 0.4s ease;
}
.phx-front { transform: translate(0, 0) rotate(0deg); z-index: 3; opacity: 1; }
.phx-mid   { transform: translate(60px, 40px) rotate(8deg);  z-index: 2; opacity: 0.55; width: clamp(140px, 28vw, 240px); }
.phx-back  { transform: translate(-70px, 30px) rotate(-10deg); z-index: 1; opacity: 0.4;  width: clamp(140px, 28vw, 240px); }
/* Subtle float animation so the hero feels alive instead of static. */
@keyframes hover-float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(0, -8px); }
}
.phx-front { animation: hover-float 4.5s ease-in-out infinite; }

@media (min-width: 780px) {
  .hero {
    grid-template-columns: 1.1fr 0.9fr;
    padding-top: 80px;
    padding-bottom: 64px;
  }
  .hero-art { min-height: 420px; }
}

/* ===========================================================================
   Features row. Three equal columns on wider screens, stacked on mobile.
   =========================================================================== */
.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 24px 24px 56px;
  max-width: 1120px; margin: 0 auto;
}
.feature {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.feature-icon {
  font-size: 28px;
  line-height: 1;
}
.feature h3 {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.005em;
}
.feature p {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
}
@media (min-width: 780px) {
  .features { grid-template-columns: repeat(3, 1fr); gap: 22px; padding-bottom: 72px; }
}

/* ===========================================================================
   Waitlist card. Centered, contained, with a clear single-action form.
   =========================================================================== */
.waitlist {
  padding: 0 24px 64px;
  display: flex; justify-content: center;
}
.waitlist-card {
  background: linear-gradient(180deg, rgba(159,232,112,0.10), rgba(159,232,112,0.03));
  border: 1px solid rgba(159,232,112,0.25);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  max-width: 560px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.waitlist-card h2 {
  margin: 0 0 10px;
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 900;
  letter-spacing: -0.01em;
}
.waitlist-card > p {
  margin: 0 0 22px;
  color: var(--text-muted);
  font-size: 15px;
}

.waitlist-form {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 420px; margin: 0 auto;
}
.waitlist-form input[type="email"] {
  padding: 14px 16px;
  font-size: 16px;       /* iOS won't auto-zoom at >=16px */
  font-weight: 600;
  color: var(--text);
  background: var(--bg-canvas);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s ease;
}
.waitlist-form input[type="email"]:focus { border-color: var(--accent); }
.waitlist-form input[type="email"]::placeholder { color: var(--text-muted); }

.waitlist-form button {
  position: relative;
  padding: 14px 22px;
  background: var(--accent);
  color: #143C2C;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.15s ease;
  box-shadow: 0 4px 0 rgba(0,0,0,0.35);
}
.waitlist-form button:hover { transform: translateY(-1px); }
.waitlist-form button:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(0,0,0,0.35); }
.waitlist-form button:disabled { cursor: wait; opacity: 0.7; }

/* Spinner shown while the form is submitting. Hidden by default; revealed
   via the .is-loading class added in script.js. */
.btn-spinner {
  display: none;
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2.5px solid rgba(20,60,44,0.4);
  border-top-color: #143C2C;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.waitlist-form.is-loading .btn-label { visibility: hidden; }
.waitlist-form.is-loading .btn-spinner { display: block; }

.waitlist-status {
  margin: 16px 0 0;
  min-height: 1.4em;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
}
.waitlist-status.is-success { color: var(--success); }
.waitlist-status.is-error   { color: var(--error); }

@media (min-width: 540px) {
  .waitlist-form { flex-direction: row; }
  .waitlist-form input[type="email"] { flex: 1; }
}

/* ===========================================================================
   Footer.
   =========================================================================== */
.site-footer {
  padding: 32px 24px 56px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.site-footer p { margin: 4px 0; }
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--accent); }

/* Respect users who prefer no animation. */
@media (prefers-reduced-motion: reduce) {
  .phx-front { animation: none; }
  .store-badge { transition: none; }
  .btn-spinner { animation: none; }
}

/* ===========================================================================
   Legal pages (privacy.html, terms.html, support.html). Constrained reading
   width, comfortable line-height, soft section dividers. Uses the same brand
   palette as the landing page so the user feels they haven't left the site.
   =========================================================================== */
.legal-page {
  padding: 24px 24px 40px;
  display: flex; justify-content: center;
}
.legal-body {
  width: 100%; max-width: 720px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  line-height: 1.65;
  font-size: 16px;
  color: var(--text);
}
.legal-body h1 {
  margin: 0 0 6px;
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 900;
  letter-spacing: -0.015em;
  color: var(--accent);
}
.legal-body h2 {
  margin: 32px 0 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--text);
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.legal-body h2:first-of-type { border-top: none; padding-top: 0; }
.legal-body h3 {
  margin: 20px 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent-warm);
}
.legal-body p { margin: 0 0 12px; }
.legal-body ul {
  margin: 0 0 16px;
  padding-left: 22px;
}
.legal-body li { margin-bottom: 6px; }
.legal-body strong { color: var(--text); font-weight: 700; }
.legal-body em { color: var(--text); font-style: italic; }
.legal-body code {
  background: var(--bg-canvas);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  color: var(--accent);
}
.legal-updated {
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 24px;
}

/* Back link sits above the H1 on every legal page so users (and Apple
   reviewers, who often deep-link straight into /privacy or /terms) always
   have a one-click route back to the home page. Subtle chevron icon +
   "Back" label; muted color so it doesn't compete with the page title. */
.back-link {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0 0 14px;
  padding: 4px 0;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 0.15s ease, gap 0.15s ease;
}
.back-link:hover {
  color: var(--accent);
  text-decoration: none;
  gap: 7px;
}
.back-link svg { display: block; }

/* Support page contact card. Sits at the top above the FAQ for fastest path
   to the email link, which is the primary action on this page. */
.support-contact {
  background: linear-gradient(180deg, rgba(159,232,112,0.10), rgba(159,232,112,0.03));
  border: 1px solid rgba(159,232,112,0.25);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 20px 0 32px;
}
.support-contact h2 { border-top: none; padding-top: 0; margin-top: 0; }
.support-email {
  font-size: 20px;
  font-weight: 800;
  margin: 8px 0 4px;
}
.support-email a { color: var(--accent); }
.support-response {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

/* Footer with policy links — adds a small spacing row above the existing
   copyright line. Used on all four pages (index + 3 legal pages). */
.site-footer .footer-links {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.05em;
}
.site-footer .footer-links a {
  color: var(--accent);
  margin: 0 4px;
}
.site-footer .footer-links a:hover { text-decoration: underline; }