/* LifeQuest landing — dark, centered, starfield hero, Lora headings */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg-top: #080b0a;
  --bg-bottom: #1b231c;
  --accent: #a8c48a;
  --accent-border: rgba(138, 173, 106, 0.22);
  --accent-faint: rgba(138, 173, 106, 0.07);
  --card: rgba(138, 173, 106, 0.05);
  --card-border: rgba(138, 173, 106, 0.16);
  --text-heading: #ffffff;
  --text-body: rgba(255, 255, 255, 0.88);
  --text-muted: rgba(255, 255, 255, 0.62);
  --input-border: rgba(255, 255, 255, 0.2);
}

.accent { color: var(--accent); }

html { scroll-behavior: smooth; background-color: var(--bg-top); }

body {
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-top) 25%, var(--bg-bottom) 100%);
  color: var(--text-body);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Hero scene — sky gradient + layered ridges, fades into page bg */
.starfield {
  position: relative;
}

.starfield::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 640' preserveAspectRatio='xMidYMax slice'><defs><linearGradient id='sky' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%234d5559'/><stop offset='0.55' stop-color='%2341494d'/><stop offset='1' stop-color='%233c4448'/></linearGradient><linearGradient id='fade' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23080b0a' stop-opacity='0'/><stop offset='1' stop-color='%23080b0a'/></linearGradient></defs><rect width='1600' height='640' fill='url(%23sky)'/><path fill='%2339424a' d='M0 258 C40 246 90 232 150 234 C210 236 250 252 300 260 C340 266 370 258 410 268 C470 282 520 300 590 322 C680 350 780 382 880 406 C960 424 1030 434 1100 442 L1100 640 L0 640 Z'/><path fill='%23313a43' d='M0 420 C120 408 240 388 350 356 C430 332 500 300 570 288 C620 279 660 278 710 290 C780 306 850 336 930 372 C1030 414 1140 448 1260 468 C1380 486 1500 494 1600 498 L1600 640 L0 640 Z'/><path fill='%2329323b' d='M1600 330 C1540 344 1480 364 1410 392 C1330 424 1250 456 1160 480 C1060 506 950 522 840 532 C700 544 550 550 400 556 L0 566 L0 640 L1600 640 Z'/><path fill='%2310171e' d='M0 462 C70 470 150 490 240 518 C330 546 430 580 520 606 C570 620 610 630 650 640 L0 640 Z'/><path fill='%2305080c' d='M1600 268 C1540 300 1480 340 1410 392 C1330 452 1250 516 1160 572 C1120 597 1080 620 1040 640 L1600 640 Z'/><rect y='470' width='1600' height='170' fill='url(%23fade)'/></svg>");
}

/* Stars — above the sky, fade out downward */
.starfield::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'><g fill='white'><circle cx='42' cy='38' r='1' opacity='0.4'/><circle cx='131' cy='104' r='0.7' opacity='0.25'/><circle cx='219' cy='55' r='1.1' opacity='0.45'/><circle cx='303' cy='142' r='0.6' opacity='0.2'/><circle cx='388' cy='72' r='0.9' opacity='0.35'/><circle cx='465' cy='27' r='0.7' opacity='0.3'/><circle cx='540' cy='118' r='1.2' opacity='0.5'/><circle cx='623' cy='64' r='0.6' opacity='0.2'/><circle cx='704' cy='139' r='0.9' opacity='0.35'/><circle cx='771' cy='42' r='0.8' opacity='0.3'/><circle cx='86' cy='197' r='0.8' opacity='0.3'/><circle cx='174' cy='251' r='1' opacity='0.4'/><circle cx='262' cy='210' r='0.5' opacity='0.18'/><circle cx='349' cy='287' r='0.9' opacity='0.32'/><circle cx='430' cy='224' r='0.7' opacity='0.25'/><circle cx='512' cy='299' r='1.1' opacity='0.42'/><circle cx='597' cy='233' r='0.6' opacity='0.2'/><circle cx='678' cy='305' r='0.8' opacity='0.3'/><circle cx='752' cy='249' r='1' opacity='0.38'/><circle cx='58' cy='341' r='0.7' opacity='0.24'/><circle cx='149' cy='398' r='0.9' opacity='0.33'/><circle cx='240' cy='352' r='0.6' opacity='0.2'/><circle cx='327' cy='420' r='1' opacity='0.36'/><circle cx='415' cy='369' r='0.7' opacity='0.26'/><circle cx='498' cy='441' r='0.8' opacity='0.28'/><circle cx='583' cy='387' r='1.1' opacity='0.4'/><circle cx='665' cy='452' r='0.6' opacity='0.2'/><circle cx='741' cy='401' r='0.9' opacity='0.32'/><circle cx='103' cy='489' r='0.8' opacity='0.28'/><circle cx='195' cy='530' r='0.6' opacity='0.2'/><circle cx='284' cy='497' r='1' opacity='0.34'/><circle cx='371' cy='548' r='0.7' opacity='0.24'/><circle cx='455' cy='508' r='0.9' opacity='0.3'/><circle cx='541' cy='556' r='0.6' opacity='0.18'/><circle cx='629' cy='514' r='0.8' opacity='0.27'/><circle cx='713' cy='561' r='1' opacity='0.33'/><circle cx='25' cy='75' r='0.8' opacity='0.35'/><circle cx='97' cy='22' r='1.1' opacity='0.5'/><circle cx='168' cy='58' r='0.6' opacity='0.25'/><circle cx='255' cy='18' r='0.9' opacity='0.4'/><circle cx='340' cy='40' r='0.7' opacity='0.3'/><circle cx='422' cy='110' r='1' opacity='0.45'/><circle cx='497' cy='68' r='0.6' opacity='0.22'/><circle cx='575' cy='20' r='0.9' opacity='0.38'/><circle cx='655' cy='95' r='1.2' opacity='0.5'/><circle cx='735' cy='15' r='0.7' opacity='0.3'/><circle cx='790' cy='90' r='0.6' opacity='0.25'/><circle cx='60' cy='130' r='1' opacity='0.42'/><circle cx='205' cy='170' r='0.8' opacity='0.32'/><circle cx='290' cy='95' r='0.7' opacity='0.28'/><circle cx='365' cy='165' r='0.6' opacity='0.22'/><circle cx='450' cy='35' r='0.8' opacity='0.34'/><circle cx='530' cy='160' r='0.7' opacity='0.26'/><circle cx='610' cy='128' r='0.9' opacity='0.36'/><circle cx='690' cy='180' r='0.6' opacity='0.22'/><circle cx='765' cy='170' r='0.8' opacity='0.3'/><circle cx='15' cy='225' r='0.7' opacity='0.26'/><circle cx='118' cy='265' r='0.9' opacity='0.34'/><circle cx='233' cy='300' r='0.6' opacity='0.2'/><circle cx='478' cy='250' r='0.8' opacity='0.3'/></g></svg>");
  background-size: 800px 600px;
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 25%, transparent 42%);
  mask-image: linear-gradient(180deg, black 0%, black 25%, transparent 42%);
}

/* Quest path — winding ribbon, narrow at the mountains, wide at the page foot */
body { position: relative; }

.quest-path {
  position: absolute;
  top: 780px; /* fallback — script.js aligns this to the mountain base on load */
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
}

.quest-path svg { width: 100%; height: 100%; display: block; }

header.site, section, .ps, footer, .starfield { position: relative; z-index: 1; }

.starfield > * { position: relative; z-index: 1; }

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}

.container-wide {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

section { padding: 80px 0; text-align: center; }

/* Section separators — subtle sage hairline above every section except the hero */
section:not(#hero)::before {
  content: "";
  display: block;
  width: min(320px, 60%);
  height: 1px;
  margin: 0 auto 72px;
  background: linear-gradient(90deg, transparent, rgba(168, 196, 138, 0.35), transparent);
}

h1, h2 {
  font-family: "Lora", Georgia, serif;
  font-weight: 400;
  color: var(--text-heading);
  line-height: 1.25;
}

h1 { font-size: 56px; margin-bottom: 24px; }
h2 { font-size: 36px; margin-bottom: 24px; }

p { margin-bottom: 20px; }
p:last-child { margin-bottom: 0; }

em { font-style: italic; }
strong { color: var(--text-heading); font-weight: 600; }

a { color: var(--text-heading); }

.wordmark {
  font-family: "Lora", Georgia, serif;
  font-size: 20px;
  color: var(--text-heading);
  text-decoration: none;
}

header.site { padding: 28px 0 0; text-align: center; }

#hero { padding-top: 96px; }

#hero h1 {
  font-family: "Lora", Georgia, serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 44px;
  letter-spacing: 0.05em;
  color: var(--text-heading);
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.28);
}

#hero p.sub { max-width: 600px; margin-left: auto; margin-right: auto; font-size: 19px; color: rgba(255, 255, 255, 0.92); }

/* Forms */
.signup-form {
  display: flex;
  gap: 12px;
  margin: 32px auto 12px;
  max-width: 560px;
}

.signup-form input[type="email"] {
  flex: 1;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 16px;
  color: var(--text-heading);
  font-family: inherit;
}

.signup-form input[type="email"]::placeholder { color: var(--text-muted); }

.signup-form input[type="email"]:focus {
  outline: none;
  border-color: rgba(168, 196, 138, 0.6);
}

.btn {
  background: #ffffff;
  color: #080b0a;
  border: none;
  border-radius: 8px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.btn:hover { background: rgba(255, 255, 255, 0.85); }
.btn:disabled { opacity: 0.6; cursor: wait; }

.btn-secondary {
  background: transparent;
  color: var(--text-body);
  border: 1px solid var(--input-border);
}

.btn-secondary:hover { background: rgba(255, 255, 255, 0.06); }

.form-note { font-size: 14px; color: var(--text-muted); font-style: italic; }

.form-error {
  display: none;
  color: #f09595;
  font-size: 14px;
  margin-top: 8px;
}

.form-error.visible { display: block; }

/* Feature cards */
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 40px;
  text-align: center;
}

.card {
  background: var(--card);
  border: 1px solid rgba(168, 196, 138, 0.28);
  border-radius: 12px;
  padding: 28px 24px;
  box-shadow: 0 0 22px rgba(168, 196, 138, 0.09), inset 0 0 18px rgba(168, 196, 138, 0.04);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.card:hover {
  border-color: rgba(168, 196, 138, 0.5);
  box-shadow: 0 0 34px rgba(168, 196, 138, 0.18), inset 0 0 22px rgba(168, 196, 138, 0.06);
}

.card h3 { text-shadow: 0 0 14px rgba(255, 255, 255, 0.28); }

.card h3 {
  font-family: "Lora", Georgia, serif;
  font-weight: 400;
  font-size: 23px;
  color: var(--text-heading);
  margin-bottom: 12px;
}

.card p { font-size: 16px; margin: 0; }

/* Method grid — phone preview beside the cards */
.method-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 40px;
  text-align: left;
}

.preview-shot {
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  border-radius: 32px;
  border: 1px solid rgba(168, 196, 138, 0.28);
  box-shadow: 0 0 40px rgba(168, 196, 138, 0.12);
}

.method-grid .cards { margin-top: 0; }

/* Stat cards */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 40px 0;
}

.stat-card {
  background: var(--card);
  border: 1px solid rgba(168, 196, 138, 0.28);
  border-radius: 12px;
  padding: 32px 24px;
  box-shadow: 0 0 22px rgba(168, 196, 138, 0.09), inset 0 0 18px rgba(168, 196, 138, 0.04);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.stat-card:hover {
  border-color: rgba(168, 196, 138, 0.5);
  box-shadow: 0 0 34px rgba(168, 196, 138, 0.18), inset 0 0 22px rgba(168, 196, 138, 0.06);
}

.stat-number {
  font-family: "Lora", Georgia, serif;
  font-size: 44px;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 14px;
}

.stat-card p { font-size: 15px; margin: 0; }

.bridge { max-width: 620px; margin: 0 auto 20px; }

.sources { font-size: 13px; color: var(--text-muted); font-style: italic; }

/* Method sub */
.method-sub {
  max-width: 640px;
  margin: 0 auto;
  font-family: "Lora", Georgia, serif;
  font-size: 24px;
  line-height: 1.45;
  color: var(--text-heading);
}
.method-sub em { color: var(--accent); }

/* Founder */
.founder-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  margin-top: 40px;
  text-align: left;
  align-items: start;
}

.founder-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
  border-radius: 12px;
  border: 1px solid var(--card-border);
}

/* Pitch */
.pitch-body { max-width: 620px; margin: 0 auto; }

.perks {
  margin: 28px auto 24px;
  display: inline-block;
  text-align: left;
}

.perks p {
  font-size: 17px;
  color: var(--text-heading);
  margin-bottom: 10px;
}

.perks p:last-child { margin-bottom: 0; }

.perks .accent { margin-right: 10px; }

/* PS block */
.ps {
  border-top: 1px solid var(--card-border);
  padding: 56px 0 80px;
  text-align: center;
}

.ps p { max-width: 620px; margin: 0 auto; }

/* Thank-you page */
.thanks { min-height: 70vh; display: flex; align-items: center; text-align: center; }

.thanks form { max-width: 560px; margin: 0 auto; }

textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 16px;
  color: var(--text-heading);
  font-family: inherit;
  min-height: 110px;
  resize: vertical;
  margin: 20px 0 6px;
  text-align: left;
}

textarea:focus { outline: none; border-color: rgba(168, 196, 138, 0.6); }

.char-count { font-size: 13px; color: var(--text-muted); text-align: right; margin-bottom: 20px; }

.btn-row { display: flex; gap: 12px; justify-content: center; }

/* Footer */
footer {
  border-top: 1px solid var(--card-border);
  padding: 32px 0;
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
}

footer a { color: var(--text-muted); }

/* Privacy page */
.privacy { text-align: left; }
.privacy h1 { text-align: center; }
.privacy h2 { font-size: 24px; margin-top: 40px; }
.privacy ul { margin: 0 0 20px 24px; }

/* Mobile — tighter vertical rhythm so the page reads shorter */
@media (max-width: 640px) {
  body { font-size: 15px; line-height: 1.6; }
  h1 { font-size: 38px; }
  #hero h1 { font-size: 28px; margin-bottom: 16px; }
  h2 { font-size: 26px; margin-bottom: 16px; }
  .method-sub { font-size: 18px; }
  section { padding: 40px 0; }
  section:not(#hero)::before { margin-bottom: 36px; }
  #hero { padding-top: 56px; }
  #hero p.sub { font-size: 17px; }
  p { margin-bottom: 14px; }
  .signup-form { flex-direction: column; gap: 10px; margin-top: 24px; }
  .signup-form input[type="email"], .btn { width: 100%; }
  .cards { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .card { padding: 20px 18px; }
  .card h3 { font-size: 20px; margin-bottom: 8px; }
  .card p { font-size: 15px; }
  .method-grid { grid-template-columns: 1fr; gap: 20px; text-align: center; margin-top: 24px; }
  .preview-shot { max-width: 200px; }
  .stats { grid-template-columns: 1fr; gap: 10px; margin: 24px 0; }
  .stat-card { padding: 22px 20px; }
  .stat-number { font-size: 36px; margin-bottom: 8px; }
  .perks { margin: 20px auto 16px; }
  .perks p { font-size: 15px; margin-bottom: 8px; }
  .founder-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
  .founder-photo { max-width: 220px; margin: 0 auto; display: block; }
  .ps { padding: 40px 0 48px; }
}