/* ── "what your customers actually receive" ────────────────────────────────
   A demo proves the bot can hold a conversation. This proves what LANDS on a
   customer's phone — the confirmation, the bank details, the driver notice,
   the nudge. Owners buy the messages, not the machinery. */
.msgs{ display:grid; gap:14px; }
@media (min-width:820px){ .msgs{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1180px){ .msgs{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.msgs figure{
  margin:0; background:var(--d-surface); border:1px solid var(--d-line);
  border-radius:var(--d-radius,12px); padding:16px; display:grid; gap:10px; align-content:start;
}
.msgs figcaption{
  font-family:"Plex Mono",monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--d-ink-2);
}
.msgs .wa{
  background:var(--d-accent); color:var(--d-on-accent,#fff);
  border-radius:12px 2px 12px 12px; padding:11px 14px;
  font-size:14.5px; line-height:1.5; white-space:pre-line;
}
.msgs .wa.them{
  background:var(--d-ground); color:var(--d-ink); border:1px solid var(--d-line);
  border-radius:2px 12px 12px 12px; justify-self:start; max-width:88%;
}
.msgs .wa b{ font-weight:700; }
.msgs .stamp{
  font-family:"Plex Mono",monospace; font-size:10.5px; color:var(--d-ink-2);
  justify-self:end; margin-top:-4px;
}

/* ── what this exact build costs ───────────────────────────────────────────
   Every demo carries its own number, added up from the published tiers rather
   than plucked out of the air — a visitor should be able to see the sum, not
   just the total. The honest line at the bottom matters as much as the price:
   where a feature needs something on the client's side, it says so. */
.cost{
  background:var(--d-surface); border:1px solid var(--d-line);
  border-radius:var(--d-radius,12px); padding:clamp(20px,3vw,30px);
  display:grid; gap:18px;
}
@media (min-width:860px){ .cost{ grid-template-columns:1.15fr 1fr; align-items:start; } }
.cost dl{ margin:0; display:grid; gap:0; }
.cost .row{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--d-line);
}
.cost .row:last-child{ border-bottom:0; }
.cost dt{ font-size:15px; }
.cost dt small{ display:block; color:var(--d-ink-2); font-size:13px; margin-top:2px; }
.cost dd{
  margin:0; font-family:"Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:15px; white-space:nowrap;
}
.cost .row.sum{ border-top:2px solid var(--d-ink); border-bottom:0; margin-top:4px; padding-top:14px; }
.cost .row.sum dt{ font-weight:700; font-size:16.5px; }
.cost .row.sum dd{ font-size:22px; font-weight:600; }
.cost .care{
  background:var(--d-ground); border:1px solid var(--d-line); border-radius:10px;
  padding:14px 16px; font-size:14px; color:var(--d-ink-2);
}
.cost .care b{ color:var(--d-ink); font-family:"Plex Mono",monospace; }
.cost .note{ margin:0; font-size:13.5px; color:var(--d-ink-2); line-height:1.55; }
.cost .cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:2px; }

/* the cheaper build — same site, nothing answering */

.cost .lean{
  grid-column:1 / -1; border-top:1px dashed var(--d-line); padding-top:18px;
  display:grid; gap:9px;
}
.cost .lean-h{
  margin:0; font-family:"Plex Mono",monospace; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--d-ink-2);
}
.cost .lean-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
}
.cost .lean-row span{ font-size:15.5px; }
.cost .lean-row b{
  font-family:"Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:19px; font-weight:600;
}
.cost .lean-note{ margin:0; font-size:13.5px; color:var(--d-ink-2); line-height:1.55; }
.cost .lean-note b{ color:var(--d-ink); }

/* Two prices, equal weight. A single headline number with the cheaper one as a
   footnote reads like a discount you have to ask for; two options side by side
   read like a choice, which is what it actually is. */
.opts{ display:grid; gap:14px; }
@media (min-width:760px){ .opts{ grid-template-columns:1fr 1fr; } }
.opt{
  background:var(--d-ground); border:1px solid var(--d-line);
  border-radius:var(--d-radius,12px); padding:22px 22px 24px;
  display:grid; gap:4px; align-content:start;
}
.opt.ai{ border-color:var(--d-accent); border-width:2px; position:relative; }
.opt .k{
  font-family:"Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--d-ink-2); margin:0;
}
.opt.ai .k{ color:var(--d-accent-ink); }
.opt .p{
  margin:2px 0 0; font-family:"Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:clamp(26px,3.4vw,34px); font-weight:600; letter-spacing:-.02em;
}
.opt .m{ margin:0 0 12px; font-size:13px; color:var(--d-ink-2); }
.opt ul{ margin:0; padding:0; list-style:none; display:grid; gap:7px; }
.opt li{ font-size:14px; line-height:1.45; padding-left:20px; position:relative; }
.opt li::before{
  content:"\2713"; position:absolute; left:0; top:0; color:var(--d-accent-ink); font-weight:700;
}
.opt .plus{
  margin:12px 0 0; font-family:"Plex Mono",monospace; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--d-ink-2);
}

/* ── the other half of the job ─────────────────────────────────────────────
   Everything above is what the customer sees. This is what the business sees,
   and it is usually the part that sells the whole thing — an owner who has been
   ringing round his own staff every night recognises it instantly. Dark, so
   nobody confuses an internal alert with a customer message. */
.staff{ background:#12181D; border-radius:var(--d-radius,12px); padding:clamp(20px,3vw,30px); }
.staff .hd{ display:grid; gap:6px; margin-bottom:18px; }
.staff .hd p{ margin:0; }
.staff .hd .k{
  font-family:"Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#5FD0BE;
}
.staff .hd h3{ margin:0; color:#fff; font-size:clamp(19px,2.4vw,26px); font-weight:700; letter-spacing:-.015em; }
.staff .hd .sub{ color:#9FB0BD; font-size:14.5px; max-width:60ch; }
.staff .grid{ display:grid; gap:12px; }
@media (min-width:820px){ .staff .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1180px){ .staff .grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.staff figure{ margin:0; display:grid; gap:8px; align-content:start; }
.staff figcaption{
  font-family:"Plex Mono",monospace; font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:#7E909E;
}
.staff .wa{
  background:#1D2A32; color:#E8F0F4; border:1px solid #293A44;
  border-radius:12px 2px 12px 12px; padding:12px 14px;
  font-size:14px; line-height:1.55; white-space:pre-line;
}
.staff .wa b{ color:#fff; font-weight:700; }


/* same trap in the message previews and the staff panel */
.msgs > *, .staff .grid > *, .opts > *, .cost > *{ min-width:0; }
.msgs .wa, .staff .wa{ overflow-wrap:anywhere; }
.cost dd, .opt .p{ overflow-wrap:anywhere; }