/* web/styles.css
 * Shared minimal CSS for /web/ landing pages.
 *
 * Token values lifted from design-handoff/design-files/tokens.css.
 * System fonts in v1 — Familjen Grotesk / DM Sans web embedding is a
 * polish pass deferred post-launch (license check needed).
 */

:root {
  --cream: #f5efe3;
  --paper: #ffffff;
  --ink: #1f1d1a;
  --ink-shade2: #4a4540;
  --ink-shade3: #7a7370;
  --ink-shade4: #b5aea4;
  --sun: #e8b547;
  --sun-d: #b88817;
  --rule: #e8e1d2;

  --serif: ui-serif, Georgia, "Iowan Old Style", "Apple Garamond", "Palatino", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-shade4);
}
a:hover { text-decoration-color: var(--ink-shade2); }

main {
  max-width: 480px;
  margin: 0 auto;
  padding: 60px 24px 100px;
}

.wordmark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  opacity: 0.7;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11.5px;
  color: var(--ink-shade3);
  margin: 0;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0;
}
h1 { font-size: 32px; line-height: 1.15; }
h2 { font-size: 22px; line-height: 1.25; margin-top: 32px; }
h3 { font-size: 17px; line-height: 1.3; margin-top: 24px; }

p { margin: 12px 0; line-height: 1.55; color: var(--ink-shade2); }

/* ---------- /i/[code] invite landing ---------- */

.invite .hero {
  margin-top: 40px;
}
.invite .code {
  font-family: var(--mono);
  font-size: 44px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 12px 0 8px;
  min-height: 56px; /* reserve vertical space so JS fill doesn't shift layout */
}
.invite .code-placeholder {
  /* shown when JS hasn't filled the code yet (also the only thing
     non-JS visitors will see before the <noscript> message) */
  color: var(--ink-shade4);
  letter-spacing: 0.2em;
}
.invite .tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-shade2);
  margin: 16px 0 0;
  line-height: 1.45;
}
.invite .install {
  display: flex;
  gap: 14px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.invite .badge {
  display: inline-block;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
}
.invite .badge:hover { opacity: 0.9; }
.invite .hint {
  margin-top: 32px;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  font-size: 14px;
  color: var(--ink-shade3);
}
.invite .hint em { color: var(--ink); font-style: normal; font-weight: 600; }
.invite noscript p {
  margin-top: 8px;
  color: var(--ink-shade3);
  font-size: 13px;
}

/* ---------- footer ---------- */

.foot {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 24px 40px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-shade3);
}
.foot a { color: var(--ink-shade3); text-decoration-color: var(--ink-shade4); }
.foot span[aria-hidden="true"] { margin: 0 8px; opacity: 0.5; }

/* ---------- disclosure pages (terms/privacy/about) ---------- */

.disclosure h1 { margin-top: 32px; }
.disclosure .draft-banner {
  margin-top: 24px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--sun);
  border-left-width: 4px;
  border-radius: 8px;
  color: var(--sun-d);
  font-size: 14px;
  font-weight: 600;
}
.disclosure .meta {
  font-size: 12px;
  color: var(--ink-shade3);
  margin-top: 8px;
}