/* ============================================================
   outbound.css — "Run AI-Powered Outbound" use-case page
   Loads AFTER outmate.css + vid.css + vid2.css + sales.css
   Only page-unique pieces live here:
     · AI-SDR live "compose" mock (hero + deep dive)
     · Deliverability band (3 cards, light)
   Everything else reuses the shared design-system components.
   ============================================================ */

/* ── AI-SDR live compose mock ── */
.ai-compose {
  font-family: var(--mono);
}
.ai-compose .sig-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(80,70,230,.08);
}
.ai-compose .sig-k {
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
}
.ai-compose .sig-v {
  font-size: 10.5px;
  color: rgba(255,255,255,.6);
  letter-spacing: .02em;
}
.ai-compose .compose {
  padding: 4px 0 6px;
}
.ai-compose .c-line {
  display: flex;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  align-items: baseline;
}
.ai-compose .c-k {
  font-size: 8.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  flex: 0 0 42px;
}
.ai-compose .c-v {
  font-size: 11px;
  color: #d2d2da;
}
.ai-compose .c-v .acc { color: #a9a2ff; }
.ai-compose .c-body {
  padding: 12px 14px 14px;
  font-family: var(--body);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.74);
}
.ai-compose .c-body .caret {
  display: inline-block;
  width: 7px;
  margin-left: 1px;
  color: var(--accent);
  animation: aiblink 1s steps(1) infinite;
}
@keyframes aiblink { 50% { opacity: 0; } }
.ai-compose .c-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.ai-compose .c-foot .send {
  color: var(--accent);
  font-weight: 700;
}

/* Deep-dive: compose mock wider stage + caption */
.dd-right .cap-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.dd-right .cap-line .d {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

/* ============================================================
   DELIVERABILITY BAND (light — unique to this page)
   ============================================================ */
.deliv {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border-top: 1px solid var(--line);
}
.deliv-card {
  padding: clamp(26px,2.8vw,44px) clamp(24px,2.4vw,38px) clamp(30px,3vw,48px);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background .25s;
}
.deliv-card:last-child { border-right: 0; }
.deliv-card:hover { background: rgba(80,70,230,.04); }
.deliv-card .di {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 18px;
}
.deliv-card:hover .di { background: var(--accent); }
.deliv-card .dh {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  font-size: clamp(19px,1.9vw,26px);
  color: var(--ink);
  text-wrap: balance;
}
.deliv-card .dp {
  font-family: var(--body);
  font-size: clamp(13px,1.15vw,15.5px);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.deliv-card .dtag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: auto;
  padding-top: 4px;
}

@media (max-width: 860px) {
  .deliv { grid-template-columns: 1fr; }
  .deliv-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .deliv-card:last-child { border-bottom: 0; }
}