@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@400;500&family=Outfit:wght@300;400;500;600&display=swap');

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

:root{
  --ink:#0f0f0e;
  --ink2:#3a3a38;
  --ink3:#888780;
  --surface:#faf9f6;
  --card:#ffffff;
  --accent:#1D9E75;
  --accent2:#0F6E56;
  --border:rgba(0,0,0,0.08);
}

@media(prefers-color-scheme:dark){
  :root{
    --ink:#f5f4f0;
    --ink2:#c8c7c0;
    --ink3:#888780;
    --surface:#141412;
    --card:#1e1e1b;
    --border:rgba(255,255,255,0.08);
  }
}

body{
  font-family:'Outfit',sans-serif;
  background:var(--surface);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.25rem 2.5rem;
  border-bottom:0.5px solid var(--border);
}
.logo{font-family:'DM Serif Display',serif;font-size:1.4rem;letter-spacing:-0.02em}
.logo a{color:var(--ink)}
.logo a:hover{text-decoration:none}
.logo span{color:var(--accent)}
.back-link{font-size:0.875rem;color:var(--ink3)}
.back-link:hover{color:var(--ink);text-decoration:none}

article{padding:4rem 2.5rem;max-width:720px;margin:0 auto}

.eyebrow{
  font-family:'DM Mono',monospace;
  font-size:0.75rem;
  color:var(--accent);
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:1.25rem;
}

article h1{
  font-family:'DM Serif Display',serif;
  font-size:2.6rem;
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin-bottom:1.25rem;
}

article .lede{
  font-size:1.15rem;
  color:var(--ink2);
  font-weight:300;
  margin-bottom:2.5rem;
  line-height:1.65;
  max-width:640px;
}

article h2{
  font-family:'DM Serif Display',serif;
  font-size:1.55rem;
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:2.75rem 0 1rem;
}

article h2 + p{margin-top:0}
article p{font-size:1rem;color:var(--ink2);line-height:1.7;margin-bottom:1rem;max-width:640px}

.coming-soon{color:var(--ink3);font-style:italic;font-size:0.9rem;padding:0.25rem 0 0.5rem}

.cta-box{
  background:var(--card);
  border:0.5px solid var(--border);
  border-radius:10px;
  padding:2rem;
  margin-top:3.5rem;
  text-align:center;
}
.cta-box h3{
  font-family:'DM Serif Display',serif;
  font-size:1.35rem;
  color:var(--ink);
  margin-bottom:0.5rem;
  letter-spacing:-0.01em;
}
.cta-box p{margin:0 auto 1.25rem;color:var(--ink2)}

.cta-btn{
  background:var(--accent2);
  color:#fff;
  padding:0.65rem 1.4rem;
  border-radius:6px;
  font-size:0.875rem;
  font-weight:600;
  text-decoration:none;
  display:inline-block;
  letter-spacing:0.01em;
  box-shadow:0 1px 2px rgba(0,0,0,0.15);
  transition:background 0.15s,transform 0.15s;
}
.cta-btn:hover{background:#0a5742;transform:translateY(-1px);text-decoration:none;color:#fff}

footer{
  padding:2rem 2.5rem;
  border-top:0.5px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.8rem;
  color:var(--ink3);
}
.footer-logo{font-family:'DM Serif Display',serif;font-size:1rem;color:var(--ink)}
.footer-logo span{color:var(--accent)}

@media(max-width:720px){
  nav{padding:1rem 1.25rem}
  article{padding:2.5rem 1.25rem}
  article h1{font-size:1.9rem}
  article h2{font-size:1.3rem;margin-top:2.25rem}
  article .lede{font-size:1rem}
  .cta-box{padding:1.5rem 1.25rem;margin-top:2.5rem}
  .cta-box h3{font-size:1.15rem}
  footer{flex-direction:column;gap:0.5rem;text-align:center;padding:1.5rem 1.25rem}
}