/**
 * Covenant Protocol — landing page.
 * "Boring by design": warm paper, sage green, editorial serif headings, calm UI.
 * Single light theme. No dark mode, no shadows, no gradients, no glow.
 *
 * The tokens and the page styles below are the same ones the documentation site
 * uses (gitbook/src/css/custom.css and gitbook/src/pages/index.module.css). They
 * are copied rather than imported because this page ships no framework: the two
 * sites are separate deployments, and a single page does not need a bundler.
 * Change a brand colour here and change it there too.
 */

/* ---------------------------------------------------------------- fonts ---- */
/* Self-hosted, latin subset only (the site is English). Variable fonts, so one
   file covers every weight in the range. Mirrors the dApp: Newsreader for
   headings, Hanken Grotesk for text, JetBrains Mono for the core-loop pills. */
@font-face {
  font-family: 'Newsreader Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/newsreader-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/newsreader-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens ---- */
:root {
  --cov-bg: #faf7f0; /* page background (cream) */
  --cov-surface: #f2ede0; /* cards, calm sections */
  --cov-border: #e5dcc5; /* fine borders, dividers */
  --cov-green: #6b9b7a; /* primary accent */
  --cov-green-dark: #669b77; /* logo bg / hover */
  --cov-ink: #1f1f1f; /* primary text */
  --cov-text2: #4a4a4a; /* secondary text */
  --cov-muted: #7a7a7a; /* tertiary text / meta */

  --cov-font-base: 'Hanken Grotesk Variable', system-ui, -apple-system, sans-serif;
  --cov-font-heading: 'Newsreader Variable', Georgia, 'Times New Roman', serif;
  --cov-font-mono: 'JetBrains Mono Variable', ui-monospace, monospace;
}

/* ---------------------------------------------------------------- base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--cov-bg);
  color: var(--cov-ink);
  font-family: var(--cov-font-base);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--cov-green);
  text-decoration: none;
}
a:hover {
  color: #4a6e57;
  text-decoration: underline;
}
img {
  max-width: 100%;
}
h1,
h2,
h3 {
  font-family: var(--cov-font-heading);
  letter-spacing: -0.02em;
  color: var(--cov-ink);
}

/* ---------------------------------------------------------------- navbar ---- */
.navbar {
  background: var(--cov-bg);
  border-bottom: 1px solid var(--cov-border);
}
.navbar__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0.8rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--cov-ink);
}
.navbar__brand:hover {
  text-decoration: none;
}
.navbar__logo {
  height: 1.6rem;
  width: auto;
}
.navbar__title {
  font-family: var(--cov-font-heading);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.navbar__items {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  /* Takes the rest of the row so the app link can be pushed to the far right. */
  flex: 1;
}
.navbar__link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cov-ink);
}
.navbar__link:hover {
  color: var(--cov-green);
  text-decoration: none;
}
/* The app link sits on the right, away from the documentation links, and carries the
   outbound arrow the docs site draws on external links. */
.navbar__items .app-link {
  margin-left: auto;
}
.navbar__items .app-link::after {
  content: '↗';
  margin-left: 0.3em;
  font-size: 0.85em;
}

/* ---------------------------------------------------------------- hero ---- */
.page {
  background: var(--cov-bg);
}
.hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: 5rem 2rem 2.5rem;
}
.heroInner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
}
.heroCopy {
  min-width: 0;
}
.heroTitle {
  font-family: var(--cov-font-heading);
  font-size: 3.4rem;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--cov-ink);
  margin: 0.6rem 0 1rem;
}
.heroTitle em {
  font-style: italic;
  color: var(--cov-green);
}
.heroSubtitle {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--cov-text2);
  max-width: 34ch;
  margin: 0 0 1.6rem;
}
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.8rem;
}
.ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.heroArt {
  display: flex;
  justify-content: center;
}
.heroArt img {
  max-width: 100%;
  width: 520px;
  height: auto;
  mix-blend-mode: darken;
}

/* ------------------------------------------- hero: contract-address slot ---- */
/* Two states, one element (#contract-address in index.html). Empty
   data-contract-address = the static "not deployed yet" notice below; a real
   address makes the inline script swap in .heroContract__address / __copy /
   __link. Styles for both states live here so launch day touches no CSS. */
.heroContract {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.7rem;
  margin-top: 1.4rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--cov-border);
  border-radius: 12px;
  background: var(--cov-surface);
  max-width: 100%;
  min-width: 0;
}
.heroContract__label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cov-green);
  white-space: nowrap;
}
.heroContract__note {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--cov-muted);
}
/* Pre-launch placeholder ("TBA"): sits exactly where the monospace address will
   land, so the slot does not change shape on launch day. */
.heroContract__value {
  font-family: var(--cov-font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cov-ink);
  white-space: nowrap;
}
.heroContract__address {
  font-family: var(--cov-font-mono);
  font-size: 0.85rem;
  color: var(--cov-ink);
  /* The script middle-truncates already; these guards keep even an untruncated
     address from ever widening the hero column on a narrow screen. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.heroContract__copy {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--cov-ink);
  padding: 0.1rem 0.7rem;
  border: 1px solid var(--cov-border);
  border-radius: 999px;
  background: var(--cov-bg);
  cursor: pointer;
}
.heroContract__copy:hover {
  color: var(--cov-green);
  border-color: var(--cov-green);
}
.heroContract__copy--done {
  color: var(--cov-green);
  border-color: var(--cov-green);
}
.heroContract__link {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.heroContract__link::after {
  content: '↗';
  margin-left: 0.3em;
  font-size: 0.85em;
}

/* ---------------------------------------------------------------- core loop strip ---- */
.loop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin-top: 2.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--cov-border);
}
.loopItem {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}
.loopStep {
  font-family: var(--cov-font-mono);
  font-size: 0.85rem;
  color: var(--cov-ink);
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--cov-border);
  border-radius: 999px;
  background: var(--cov-surface);
}
.loopArrow {
  color: var(--cov-green);
  font-weight: 600;
}

/* ---------------------------------------------------------------- sections ---- */
.section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 3.5rem 2rem;
}
.sectionHead {
  margin-bottom: 2rem;
}
.sectionTitle {
  font-size: 2.1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--cov-ink);
  margin: 0.5rem 0 0;
  max-width: 26ch;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.guarantee {
  border: 1px solid var(--cov-border);
  border-radius: 16px;
  background: var(--cov-bg);
  padding: 1.6rem;
}
.guaranteeTitle {
  font-family: var(--cov-font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
  color: var(--cov-ink);
}
.guaranteeBody {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--cov-text2);
  margin: 0;
}

/* ---------------------------------------------------------------- closing band ---- */
.closing {
  max-width: 1180px;
  margin: 1rem auto 4rem;
  padding: 3rem 2rem;
  border: 1px solid var(--cov-border);
  border-radius: 20px;
  background: var(--cov-surface);
  text-align: center;
}
.closingTitle {
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--cov-ink);
  margin: 0.5rem auto 0.8rem;
  max-width: 20ch;
}
.closingTitle em {
  font-style: italic;
  color: var(--cov-green);
}
.closingBody {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--cov-text2);
  max-width: 52ch;
  margin: 0 auto 1.8rem;
}
.closing .ctas {
  justify-content: center;
}

/* ---------------------------------------------------------------- buttons (pill) ---- */
.button {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  padding: 0.5rem 1.2rem;
  font-size: 1rem;
}
.button:hover {
  text-decoration: none;
}
.button--lg {
  padding: 0.75rem 1.75rem;
  font-size: 1.05rem;
}
.button--primary {
  background: var(--cov-green);
  border-color: var(--cov-green);
  color: #fff;
}
.button--primary:hover {
  background: var(--cov-green-dark);
  border-color: var(--cov-green-dark);
  color: #fff;
}
.button--secondary {
  background: #ebedf0;
  border-color: #ebedf0;
  color: var(--cov-ink);
}
.button--secondary:hover {
  background: #dfe1e5;
  border-color: #dfe1e5;
  color: var(--cov-ink);
}

/* ---------------------------------------------------------------- utility: eyebrow / pills ---- */
.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cov-green);
}
.pill {
  display: inline-block;
  padding: 0.15em 0.7em;
  border-radius: 999px;
  border: 1px solid var(--cov-border);
  background: var(--cov-surface);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.6;
}
.pill--green {
  color: var(--cov-green);
  border-color: rgba(107, 155, 122, 0.4);
  background: rgba(107, 155, 122, 0.1);
}

/* ---------------------------------------------------------------- footer ---- */
.footer {
  background: var(--cov-surface);
  border-top: 1px solid var(--cov-border);
  color: var(--cov-text2);
  padding: 3rem 2rem 2rem;
}
.footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.footer__title {
  font-family: var(--cov-font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cov-ink);
  margin-bottom: 0.6rem;
}
.footer__items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__items li {
  margin-bottom: 0.35rem;
}
.footer__items a {
  color: var(--cov-text2);
  font-size: 0.95rem;
}
.footer__items a:hover {
  color: var(--cov-green);
}
.footer__copyright {
  max-width: 1180px;
  margin: 1.4rem auto 0;
  color: var(--cov-muted);
  font-size: 0.82rem;
}

/* ---------------------------------------------------------------- responsive ---- */
@media screen and (max-width: 900px) {
  .navbar__inner {
    padding: 0.8rem 1.3rem;
  }
  .hero {
    padding: 3rem 1.3rem 2rem;
  }
  .heroInner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .heroArt {
    order: -1;
  }
  .heroArt img {
    width: 380px;
  }
  .heroTitle {
    font-size: 2.5rem;
  }
  .heroSubtitle {
    max-width: none;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .sectionTitle,
  .closingTitle {
    font-size: 1.8rem;
  }
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}