/* WHY THIS FILE EXISTS
   One stylesheet, no framework, no build step. Every color below is copied verbatim from
   the app's Theme.swift so nervtrack.com and the NervTrack app are one brand system.
   Zero external requests (system fonts only) — this site sets no cookies and loads
   nothing from anyone else's servers. */

:root {
  --ink: #33312B;            /* charcoal — primary text */
  --ink-secondary: #6B6557;  /* taupe — secondary text */
  --canvas: #FBF7F1;         /* cream — page background */
  --surface: #F5EDE4;        /* warm beige — cards / insets */
  --hairline: #E6DAC8;       /* beige border */
  --olive: #4A5D23;          /* structural / CTA */
  --terracotta: #B86B4A;     /* accent */

  --serif: ui-serif, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

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

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main { display: block; }

/* ---------- Hero: the X pattern — logo, one line, one route ---------- */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
}

/* The logo file carries its own baked-in beige field, so we present it the way the
   brand banner does: as an app-icon tile. Rounded + soft shadow = "this is an app",
   and the field reads as intentional instead of as a color mismatch. */
.hero-logo {
  width: min(40vw, 250px);
  height: auto;
  border-radius: 22.5%;
  box-shadow: 0 18px 40px rgba(51, 49, 43, 0.14);
}

.wordmark {
  font-family: var(--serif);
  font-size: clamp(44px, 9vw, 72px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-top: 8px;
}
.wordmark .nerv { color: var(--terracotta); }
.wordmark .track { color: var(--olive); }

.kicker {
  margin-top: 30px;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--terracotta);
}

h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--olive);
  margin-top: 10px;
  max-width: 17ch;
}

.sub {
  max-width: 620px;
  margin-top: 30px;
  font-size: clamp(17px, 2.2vw, 19px);
  color: var(--ink);
}

.cta {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Pre-launch state: a plain statement, not a fake button. Swapped for the official
   App Store badge + Smart App Banner meta tag on approval day. */
.coming {
  display: inline-block;
  border: 1.5px solid var(--olive);
  color: var(--olive);
  border-radius: 999px;
  padding: 12px 28px;
  font-weight: 600;
  font-size: 16px;
}

.device-line {
  font-size: 14px;
  color: var(--ink-secondary);
}

/* ---------- The three blocks ---------- */

.blocks {
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 24px 72px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.block {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 28px 26px;
}

.block h2 {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.25;
  color: var(--olive);
  margin-bottom: 12px;
}

.block p { color: var(--ink); font-size: 16px; }

@media (max-width: 800px) {
  .blocks { grid-template-columns: 1fr; max-width: 560px; }
}

/* ---------- Privacy strip ---------- */

.privacy-strip {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 56px 24px;
  text-align: center;
}

.privacy-strip h2 {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--terracotta);
  margin-bottom: 12px;
}

.privacy-strip p {
  max-width: 560px;
  margin: 0 auto;
  color: var(--ink);
}

/* ---------- Footer ---------- */

footer {
  padding: 36px 24px 44px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-secondary);
}

footer a { color: var(--ink-secondary); text-decoration-color: var(--hairline); }
footer a:hover { color: var(--olive); }
footer .sep { margin: 0 10px; color: var(--hairline); }

/* ---------- Inner pages (privacy, founder) ---------- */

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 64px 24px 72px;
}

.page .home-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--terracotta);
  text-decoration: none;
}

.page h1 {
  margin-top: 18px;
  max-width: none;
}

.page h2 {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--olive);
  margin: 40px 0 10px;
}

.page p { margin-top: 14px; }

.page p a { color: var(--terracotta); text-decoration-color: var(--hairline); }
.page p a:hover { color: var(--olive); }

.page .muted { color: var(--ink-secondary); font-size: 15px; }

.video-slots { display: grid; gap: 14px; margin-top: 18px; }

.video-slot {
  display: block;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 20px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.video-slot span { display: block; font-weight: 400; font-size: 14px; color: var(--ink-secondary); margin-top: 4px; }