/* Landing page — uses tokens from app.css, adds marketing-layout pieces only */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  max-width: 980px;
  margin: 0 auto;
}
.nav .brand { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }

.hero {
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 24px 60px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; padding-top: 10px; }
}
.hero h1 {
  font-size: 2.5rem;
  max-width: 11ch;
  margin-bottom: .35em;
}
@media (max-width: 760px) { .hero h1 { font-size: 2rem; } }
.hero .sub {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 42ch;
  margin-bottom: 24px;
}
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-row .btn { padding: 12px 22px; }

/* hero visual: a "label" mock with a dashed die-cut edge + a wave icon */
.hero-visual {
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.hero-visual .mini-label {
  width: 90px; height: 120px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
}
.hero-visual .caption { font-size: .78rem; color: var(--muted); text-align: center; }

section { max-width: 980px; margin: 0 auto; padding: 50px 24px; }
section + section { border-top: 1px solid var(--line); }
.section-title { max-width: 32ch; margin-bottom: 34px; }
.section-title .kicker { display: block; font-size: .8rem; color: var(--stamp); font-weight: 600; margin-bottom: 8px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.step .num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--stamp);
  margin-bottom: 8px;
}
.step h3 { margin-bottom: 6px; }
.step p { color: var(--muted); font-size: .92rem; }

.use-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .use-cases { grid-template-columns: 1fr; } }
.use-case {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 20px;
  background: #fff;
}
.use-case h3 { font-size: 1.05rem; margin-bottom: 6px; }
.use-case p { color: var(--muted); font-size: .88rem; margin: 0; }

.compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}
@media (max-width: 760px) { .compare-row { grid-template-columns: 1fr; } }
.compare-col { padding: 20px; border-radius: var(--radius); }
.compare-col.old { background: var(--paper-dim); }
.compare-col.new { background: var(--record-dim); border: 1px solid var(--record); }
.compare-col h4 { margin-bottom: 10px; font-size: .85rem; }
.compare-col ul { margin: 0; padding-left: 18px; font-size: .88rem; color: var(--ink); }
.compare-col li { margin-bottom: 6px; }

.faq-item { border-top: 1px solid var(--line); padding: 18px 0; }
.faq-item:first-child { border-top: none; }
.faq-item h3 { font-size: .98rem; margin-bottom: 6px; }
.faq-item p { color: var(--muted); font-size: .9rem; margin: 0; }

.final-cta {
  text-align: left;
  background: var(--ink);
  color: #fff;
  border-radius: 6px;
  padding: 40px;
  margin: 0 24px 60px;
  max-width: 932px;
  margin-left: auto; margin-right: auto;
}
.final-cta h2 { color: #fff; }
.final-cta p { color: #cfd0d4; }
.final-cta .cta-row .btn.secondary { background: transparent; border-color: #fff; color: #fff; }

footer {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .82rem;
  color: var(--muted);
}
footer a { color: var(--muted); }