:root {
  --pine: #14423c;
  --pine-deep: #0d2f2a;
  --amber: #c2751a;
  --ink: #17202a;
  --muted: #5d6b73;
  --line: #dee4e5;
  --paper: #ffffff;
  --ground: #f2f5f4;
  --hot: #b3341f;
  --warm: #b0700c;
  --cold: #5a6b78;
  --good: #2f6b46;
  --radius: 8px;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

.wrap { max-width: 820px; margin: 0 auto; padding: 0 20px; }
.wrap-wide { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

main { padding: 32px 0 60px; }

/* ---------- demo chrome: the only navigation, all real destinations ---------- */

.demo-bar {
  background: #0b1012;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.demo-bar .wrap-wide { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; min-height: 46px; }
.demo-bar-id { display: flex; align-items: baseline; gap: 7px; font-size: 13px; }
.demo-bar-id .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #6ee7a8; align-self: center;
  box-shadow: 0 0 0 3px rgba(110,231,168,0.16);
}
.demo-bar-name { font-weight: 600; }
.demo-bar-by { font-size: 11.5px; color: rgba(255,255,255,0.45); }

.demo-tabs { display: flex; gap: 2px; margin-right: auto; }
.demo-tabs a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 13px;
  padding: 13px 13px;
  border-bottom: 2px solid transparent;
}
.demo-tabs a:hover { color: #fff; }
.demo-tabs a.on { color: #fff; border-bottom-color: var(--amber); font-weight: 600; }

.demo-mode {
  font: 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
}
.demo-mode .live { color: #6ee7a8; }

.demo-reset { margin: 0; }
.demo-reset button {
  border-color: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.72);
  background: transparent;
  padding: 6px 13px;
  font-size: 12.5px;
}
.demo-reset button:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* ---------- team-facing header ---------- */

.site-head {
  background: var(--pine);
  color: #fff;
  padding: 20px 0;
  border-bottom: 3px solid var(--amber);
}
.site-head .brand { font-size: 21px; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
.site-head .tagline { margin: 3px 0 0; font-size: 13px; opacity: 0.72; }
.site-head a { color: #fff; text-decoration: none; }

/* ---------- cards and type ---------- */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-bottom: 18px;
}

h1 { font-size: 27px; margin: 0 0 6px; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 17px; margin: 0 0 12px; font-weight: 650; }
.lede { color: var(--muted); margin: 0 0 22px; font-size: 15px; }
.section-title {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted); font-weight: 700; margin: 0 0 10px;
}

/* ---------- forms ---------- */

label { display: block; font-size: 13px; font-weight: 600; margin: 15px 0 5px; }
label .opt { font-weight: 400; color: var(--muted); }

input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 15px;
  background: #fff;
  color: var(--ink);
}
textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--pine); outline-offset: 1px; border-color: var(--pine); }

.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > * { flex: 1 1 210px; min-width: 0; }

button, .btn {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--pine);
  background: var(--pine);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .btn:hover { background: var(--pine-deep); }
button[disabled] { opacity: 0.55; cursor: progress; }
.btn-ghost { background: transparent; color: var(--pine); }
.btn-ghost:hover { background: rgba(20,66,60,0.07); color: var(--pine); }
.btn-sm { padding: 7px 14px; font-size: 13px; }

.actions { margin-top: 22px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hint { font-size: 12.5px; color: var(--muted); }

/* ---------- banners ---------- */

.banner {
  border-radius: var(--radius);
  padding: 13px 17px;
  margin-bottom: 18px;
  font-size: 14px;
  border: 1px solid;
}
.banner-ok { background: #edf5f0; border-color: #c9e0d3; color: #255239; }
.banner-err { background: #fdeeec; border-color: #f0ccc7; color: var(--hot); }

/* ---------- the SMS thread ---------- */

.thread-grid { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.thread-col { flex: 1 1 380px; min-width: 0; max-width: 460px; }
.thread-side { flex: 1 1 320px; min-width: 0; }

.phone {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(15,35,30,0.07);
}
.phone-head {
  background: #f6f8f8;
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
  text-align: center;
}
.phone-head .who { font-size: 14px; font-weight: 650; }
.phone-head .num { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.thread {
  padding: 16px;
  min-height: 300px;
  max-height: 58vh;
  overflow-y: auto;
  background: #fbfcfc;
}

.bubble {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 17px;
  margin-bottom: 9px;
  font-size: 14.5px;
  line-height: 1.42;
  white-space: pre-wrap;
  word-wrap: break-word;
  animation: rise 0.22s ease-out;
}
.bubble.out {
  background: var(--pine);
  color: #fff;
  border-bottom-left-radius: 5px;
  margin-right: auto;
}
.bubble.in {
  background: #e4e9ea;
  color: var(--ink);
  border-bottom-right-radius: 5px;
  margin-left: auto;
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.bubble-meta {
  font: 10.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted);
  margin: -5px 0 10px 4px;
}
.bubble-meta.right { text-align: right; margin-right: 4px; }

.typing { display: flex; gap: 4px; padding: 12px 15px; width: 56px; }
.typing span {
  width: 7px; height: 7px; border-radius: 50%; background: #9fb0ad;
  animation: blink 1.3s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: 0.18s; }
.typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

.composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: #fff; }
.composer input { flex: 1 1 auto; border-radius: 20px; }
.composer button { border-radius: 20px; padding: 10px 18px; }

.suggest { padding: 0 12px 12px; display: flex; gap: 6px; flex-wrap: wrap; background: #fff; }
.suggest button {
  background: #eef2f1;
  color: var(--pine);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
}
.suggest button:hover { background: #e2e9e7; }

/* ---------- live qualification panel ---------- */

.facts { list-style: none; margin: 0; padding: 0; }
.facts li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.facts li:last-child { border-bottom: none; }
.facts .k { color: var(--muted); display: flex; align-items: center; gap: 8px; }
.facts .v { font-weight: 650; text-align: right; }
.facts .v.pending { font-weight: 400; color: #a9b4b8; font-style: italic; }
.facts .tick {
  width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid #c3cdd0; display: inline-block; flex: 0 0 auto;
}
.facts li.got .tick { background: var(--good); border-color: var(--good); }
.facts li.got .tick::after {
  content: "✓"; color: #fff; font-size: 10px; line-height: 13px;
  display: block; text-align: center; font-weight: 700;
}

.verdict { border-radius: var(--radius); padding: 16px 18px; margin-top: 16px; border: 1px solid; }
.verdict .label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; }
.verdict .reason { font-size: 13.5px; margin-top: 6px; line-height: 1.45; }
.verdict.hot { background: #fdeeeb; border-color: #f2cdc5; color: var(--hot); }
.verdict.warm { background: #fdf4e6; border-color: #eedcbd; color: var(--warm); }
.verdict.cold { background: #eef1f3; border-color: #d6dde2; color: var(--cold); }
.verdict .reason, .verdict .next { color: var(--ink); }
.verdict .next { font-size: 13.5px; margin-top: 10px; }

/* ---------- pipeline ---------- */

.stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.stat {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 16px; flex: 1 1 140px;
}
.stat .n { font-size: 25px; font-weight: 750; line-height: 1.1; letter-spacing: -0.02em; }
.stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-top: 3px; }

.s-hot { color: var(--hot); } .s-warm { color: var(--warm); } .s-cold { color: var(--cold); }

.pipe-grid { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.pipe-main { flex: 1 1 560px; min-width: 0; }
.pipe-side { flex: 1 1 300px; min-width: 0; }

.list { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.list-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 13px 16px; border-top: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.list-row:first-child { border-top: none; }
.list-row:hover { background: #f7faf9; }
.list-row.done { opacity: 0.62; }
.list-row.fresh { background: #fdf8ec; box-shadow: inset 3px 0 0 var(--amber); }

.pill {
  flex: 0 0 auto; align-self: center;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; border: 1px solid;
}
.pill.hot { background: #fdeeeb; border-color: #f2cdc5; color: var(--hot); }
.pill.warm { background: #fdf4e6; border-color: #eedcbd; color: var(--warm); }
.pill.cold { background: #eef1f3; border-color: #d6dde2; color: var(--cold); }
.pill.none { background: #f4f6f7; border-color: var(--line); color: var(--muted); }

.row-main { flex: 1 1 auto; min-width: 0; }
.row-main .who { font-weight: 650; font-size: 14.5px; }
.row-main .who .addr { font-weight: 400; color: var(--muted); }
.row-main .snip {
  color: var(--muted); font-size: 13px; margin-top: 2px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.row-meta { flex: 0 0 auto; text-align: right; font-size: 12px; color: var(--muted); }
.row-meta .stale { color: var(--hot); font-weight: 650; }

.tag {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 20px;
  background: #eef2f1; color: #3f5651; border: 1px solid var(--line);
}
.tag-routed { background: #eaf3ed; color: var(--good); border-color: #cfe2d6; }
.tag-nurturing { background: #fdf4e6; color: var(--warm); border-color: #eedcbd; }

.just-in {
  display: inline-block; font-size: 10px; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: #8a5a17; background: #f8ecd6; border: 1px solid #e8d5b2;
  border-radius: 3px; padding: 1px 5px; margin-right: 7px; vertical-align: 1px;
}

/* ---------- detail ---------- */

.kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--muted); }
.kv .v { text-align: right; font-weight: 650; word-break: break-word; }

.touches { list-style: none; margin: 0; padding: 0; }
.touches li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.touches li:last-child { border-bottom: none; }
.touches .when { font-weight: 650; }
.touches .kind {
  font: 10.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted); border: 1px solid var(--line);
  border-radius: 3px; padding: 1px 5px; margin-left: 6px; background: #fafbfb;
}
.touches .note { color: var(--muted); margin-top: 3px; line-height: 1.4; }

pre.payload {
  background: #0d1418; color: #cfdce0; padding: 15px;
  border-radius: var(--radius); overflow-x: auto;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 0;
}
pre.transcript {
  background: #f7f9f9; border: 1px solid var(--line); color: var(--ink);
  padding: 15px; border-radius: var(--radius); overflow-x: auto;
  font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  margin: 0; white-space: pre-wrap;
}

.src {
  font: 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted); border: 1px solid var(--line);
  border-radius: 3px; padding: 1px 6px; background: #fafbfb;
}

.draft-text {
  white-space: pre-wrap; font-size: 15px; line-height: 1.6;
  background: #fbfcfc; border-left: 3px solid var(--amber);
  padding: 16px 18px; border-radius: 0 var(--radius) var(--radius) 0;
}
.draft-head { display: block; font-weight: 700; font-size: 16px; margin-bottom: 10px; }

/* ---------- ROI ---------- */

.roi { background: var(--pine); color: #fff; border: none; }
.roi h2 { color: #fff; }
.roi .lede { color: rgba(255,255,255,0.68); }
.roi .big { font-size: 33px; font-weight: 750; letter-spacing: -0.02em; color: #ffd08a; }
.roi .kv { border-color: rgba(255,255,255,0.13); }
.roi .kv .k { color: rgba(255,255,255,0.6); }
.roi .kv .v { color: #fff; }
.roi .assume { font-size: 11.5px; color: rgba(255,255,255,0.5); margin-top: 12px; line-height: 1.45; }

/* ---------- footer ---------- */

footer.demo-note {
  border-top: 1px solid var(--line);
  padding: 18px 0 40px; font-size: 12px; color: var(--muted);
}
footer.demo-note strong { color: #8a5a17; }

@media (max-width: 640px) {
  .row-meta { display: none; }
  .stats .stat { flex-basis: 44%; }
  .thread-col { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bubble { animation: none; }
  .typing span { animation: none; opacity: 0.6; }
}