/* Landing page only (public/welcome.html) -- shares the app's color tokens
   (:root vars below are duplicated, not imported, so this file works even
   if style.css's own selectors change shape later) and terminal aesthetic,
   but its own layout rules live here instead of bloating style.css with
   marketing-page CSS the actual app never uses. */

:root {
  --bg: #060a06;
  --bg-panel: #0b120b;
  --fg: #3af23a;
  --fg-bright: #8dffb0;
  --fg-dim: #3a7a4a;
  --accent: #29ffa0;
  --border: #1f3a1f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Courier New', Consolas, Menlo, monospace;
  line-height: 1.5;
}

a { color: var(--accent); }

.wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 1.2rem;
}

.landing-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.2rem;
  background: rgba(6, 10, 6, 0.92);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--border);
}

.brand {
  font-weight: bold;
  letter-spacing: 0.5px;
  color: var(--fg-bright);
}

.brand .accent { color: var(--accent); }

.nav-cta {
  display: flex;
  gap: 0.6rem;
}

.btn {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  background: var(--bg-panel);
  border: 1px solid var(--fg-dim);
  color: var(--fg);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.btn:hover {
  border-color: var(--accent);
  color: var(--fg-bright);
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: bold;
}

.btn-primary:hover {
  color: var(--bg);
  box-shadow: 0 0 14px rgba(41, 255, 160, 0.5);
}

.hero {
  padding: 4.5rem 0 3.5rem;
  text-align: center;
}

.hero .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  margin-right: 7px;
  animation: pulse 1.6s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--fg-dim);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.hero h1 {
  font-size: clamp(1.7rem, 4.2vw, 2.8rem);
  color: var(--fg-bright);
  margin: 0 0 1rem;
  line-height: 1.25;
}

.hero h1 .accent { color: var(--accent); }

.hero p.lede {
  max-width: 620px;
  margin: 0 auto 2rem;
  color: var(--fg);
  font-size: 15px;
}

.hero-cta {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.hero-cta .btn { padding: 0.75rem 1.6rem; font-size: 13px; }

.hero-note {
  font-size: 11px;
  color: var(--fg-dim);
}

/* Fake terminal mockup -- static, non-interactive, just to show the shape
   of the real product above the fold without needing a screenshot asset. */
.term-mock {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(41, 255, 160, 0.08);
}

.term-mock-bar {
  display: flex;
  gap: 6px;
  padding: 0.6rem 0.8rem;
  background: #0e170e;
  border-bottom: 1px solid var(--border);
}

.term-mock-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fg-dim);
}

.term-mock-body {
  padding: 1rem 1.1rem;
  font-size: 12.5px;
}

.term-mock-body .line { margin-bottom: 0.5rem; white-space: pre-wrap; }
.term-mock-body .prompt { color: var(--fg-dim); }
.term-mock-body .cmd { color: var(--fg-bright); }
.term-mock-body .out { color: var(--fg); }
.term-mock-body .flag { color: var(--accent); font-weight: bold; }

section {
  padding: 3rem 0;
  border-top: 1px solid var(--border);
}

.section-title {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 0.4rem;
}

.section-heading {
  font-size: 1.4rem;
  color: var(--fg-bright);
  margin: 0 0 1.8rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.1rem 1.2rem;
}

.card h3 {
  margin: 0 0 0.5rem;
  color: var(--accent);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card p {
  margin: 0;
  font-size: 12.5px;
  color: var(--fg);
}

.steps {
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.step {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.step-num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.step-text { font-size: 13px; color: var(--fg); padding-top: 3px; }
.step-text b { color: var(--fg-bright); }
.step-text code {
  color: var(--fg-bright);
  background: rgba(255, 255, 255, 0.06);
  padding: 0 3px;
  border-radius: 2px;
}

.tutorial-callout {
  margin-top: 1.6rem;
  padding: 0.9rem 1.1rem;
  border: 1px dashed var(--fg-dim);
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--fg-dim);
}

.tutorial-callout b { color: var(--fg-bright); }

.not-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.7rem;
}

.not-list li {
  font-size: 12.5px;
  color: var(--fg);
  padding-left: 1.1em;
  position: relative;
}

.not-list li::before {
  content: '\2715';
  position: absolute;
  left: 0;
  color: var(--fg-dim);
  font-size: 10px;
  top: 3px;
}

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.price-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.3rem 1.3rem 1.5rem;
}

.price-card.highlight {
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(41, 255, 160, 0.12);
}

.price-name {
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.price-amount {
  font-size: 1.8rem;
  color: var(--fg-bright);
  margin: 0.3rem 0 1rem;
}

.price-amount span { font-size: 0.9rem; color: var(--fg-dim); }

.price-card ul {
  margin: 0 0 1.2rem;
  padding-left: 1.1em;
  font-size: 12.5px;
  color: var(--fg);
}

.price-card li { margin-bottom: 0.4rem; }

.cta-band {
  text-align: center;
  padding: 3.5rem 0;
}

.cta-band h2 {
  color: var(--fg-bright);
  font-size: 1.5rem;
  margin: 0 0 1.2rem;
}

footer {
  border-top: 1px solid var(--border);
  padding: 1.6rem 0 2.2rem;
  text-align: center;
  font-size: 11px;
  color: var(--fg-dim);
}

footer a { color: var(--fg-dim); margin: 0 0.5rem; }
footer a:hover { color: var(--accent); }

footer .disclaimer {
  max-width: 560px;
  margin: 0 auto 1rem;
  color: var(--fg-dim);
}