/* ===========================================================
   Sayso Landing — Shared tokens & chrome
   Desktop-first, 1440 canvas. Mobile fallback kept minimal.
   =========================================================== */

:root {
  --ember-50:  #FFF3EC;
  --ember-100: #FFE2D1;
  --ember-200: #FFC4A0;
  --ember-300: #FF9F6B;
  --ember-400: #F47442;
  --ember-500: #D85A2A;
  --ember-600: #B2441C;
  --ember-700: #832F12;

  --ink-50:  #EEEBF4;
  --ink-100: #D8D1E4;
  --ink-300: #7D6FA1;
  --ink-500: #3A2E5C;
  --ink-700: #221A3B;
  --ink-900: #15102A;

  --moss-400: #7FA07A;
  --moss-500: #5E8359;

  --paper-0:   #FBFAF7;
  --paper-50:  #F5F2EC;
  --paper-100: #ECE7DE;
  --paper-200: #DED6C8;
  --paper-300: #B9AE9B;
  --paper-500: #786E5E;
  --paper-700: #3C362E;
  --paper-900: #1C1914;

  --ff-sans: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ff-serif: "Instrument Serif", "New York", Georgia, serif;
  --ff-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --max-w: 1200px;
  --gutter: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ff-sans);
  background: var(--paper-0);
  color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

/* ============ Shared primitives ============ */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.kicker {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-500);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.kicker::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--paper-300);
}

.display {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.028em;
  color: var(--ink-900);
  line-height: 1.02;
}
.display .plain {
  font-family: var(--ff-sans);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.display .ember {
  color: var(--ember-500);
}
.display .dot {
  color: var(--ember-500);
  font-style: normal;
}

/* ============ Nav ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251,250,247,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.wordmark {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  line-height: 1;
  text-decoration: none;
}
.wordmark .dot { color: var(--ember-500); }

.nav-links {
  display: flex;
  gap: 30px;
  align-items: center;
}
.nav-link {
  font-size: 13.5px;
  color: var(--paper-700);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.nav-link:hover { color: var(--ember-600); }

.nav-cta-group { display: flex; gap: 8px; align-items: center; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ff-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s, background .15s, color .15s;
}
.btn:active { transform: translateY(1px); }

.btn-ink {
  background: var(--ink-900);
  color: #fff;
  border-radius: 10px;
  padding: 10px 18px;
  height: 40px;
}
.btn-ink:hover { background: var(--ink-700); }

.btn-ghost {
  background: transparent;
  color: var(--paper-700);
  border: 1px solid var(--paper-200);
  border-radius: 10px;
  padding: 10px 18px;
  height: 40px;
}
.btn-ghost:hover { color: var(--ink-900); border-color: var(--paper-300); }

/* App store buttons — real-looking dark pills */
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 20px;
  background: var(--ink-900);
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
  transition: transform .12s, background .15s;
}
.store-btn:hover { background: var(--ink-700); transform: translateY(-1px); }
.store-btn .st-ico { flex-shrink: 0; }
.store-btn .st-text { display: flex; flex-direction: column; line-height: 1.1; }
.store-btn .st-sm {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.75;
  font-family: var(--ff-sans);
  text-transform: none;
}
.store-btn .st-lg {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 1px;
}

/* ============ Section scaffolding ============ */
section { padding: 100px 0; }
section.tight { padding: 72px 0; }
section.wide { padding: 140px 0; }

.section-head {
  max-width: 760px;
  margin-bottom: 60px;
}
.section-head .kicker { margin-bottom: 18px; }
.section-head .h2 {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 64px;
  letter-spacing: -0.028em;
  line-height: 1.0;
  color: var(--ink-900);
}
.section-head .h2 .plain {
  font-family: var(--ff-sans);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.018em;
}
.section-head .h2 .ember { color: var(--ember-500); }
.section-head .lede {
  font-size: 17px;
  color: var(--paper-700);
  line-height: 1.55;
  max-width: 580px;
  margin-top: 20px;
}

/* divider rule */
.rule {
  height: 1px;
  background: var(--paper-200);
  width: 100%;
  border: none;
  margin: 0;
}

/* numbered marker used in scenes / features */
.num {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--paper-500);
  display: inline-block;
}

/* ============ Helper text ============ */
.t-mono { font-family: var(--ff-mono); }
.t-serif { font-family: var(--ff-serif); font-style: italic; }