/* ==========================================================================
   COMPONENTS — small reusable UI pieces: status pill, copy elements,
   telemetry readout, and the signup form.
   ========================================================================== */

.wordmark{
  font-family:var(--font-display);
  font-weight:700;
  font-size:18px;
  letter-spacing:0.04em;
}

.status-pill{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  color:var(--text-dim);
  padding:6px 12px;
  background:rgba(10,11,15,0.5);
  backdrop-filter:blur(6px);
  border:1px solid var(--wire);
  border-radius:100px;
}
.status-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--eye-color);
  box-shadow:0 0 6px var(--eye-color);
  transition:background 0.4s linear, box-shadow 0.4s linear;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.12em;
  color:var(--signal-cyan);
  margin-bottom:18px;
  opacity:0.9;
}

p.lede{ font-size:16px; line-height:1.65; color:var(--text-dim); max-width:480px; }

.telemetry-line{
  margin-top:28px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-dim);
  letter-spacing:0.05em;
  display:flex;
  align-items:center;
  gap:12px;
}
.readout-bar{
  width:120px; height:2px;
  background:var(--wire-soft);
  position:relative; overflow:hidden;
}
.readout-bar::after{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:calc(var(--progress, 0) * 100%);
  background:linear-gradient(90deg, var(--signal-violet), var(--signal-cyan));
}
.pct{ color:var(--signal-cyan); }

.cta-row{
  margin-top:30px;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:420px;
}
.cta-row input,
.cta-row textarea{
  background:rgba(8,9,13,0.6);
  border:1px solid var(--wire);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:14px;
  padding:14px 16px;
  border-radius:6px;
  outline:none;
  width:100%;
}
.cta-row textarea{
  resize:vertical;
  min-height:76px;
  line-height:1.5;
}
.cta-row input:focus,
.cta-row textarea:focus{ border-color:var(--signal-cyan); }
.cta-row input::placeholder,
.cta-row textarea::placeholder{ color:var(--text-dim); }
.cta-row button{
  align-self:flex-start;
  background:var(--signal-cyan);
  color:var(--bg-void);
  border:none;
  font-family:var(--font-display);
  font-weight:600;
  font-size:14px;
  padding:14px 22px;
  border-radius:6px;
  cursor:pointer;
  transition:transform 0.2s ease, background 0.2s ease;
}
.cta-row button:hover{ transform:translateY(-1px); background:#7FF3E1; }
.cta-row button:focus-visible,
.cta-row input:focus-visible,
.cta-row textarea:focus-visible{
  outline:2px solid var(--signal-violet);
  outline-offset:2px;
}
.cta-note{
  margin-top:14px;
  font-size:12px;
  color:var(--text-dim);
  font-family:var(--font-mono);
}