/* ==========================================================================
   connected-ai.css — /connected-ai. Loads after feature-v2, feature-v3,
   show.css, home.css and insights.css (the Ask device is reused from
   /review-insights, so its classes come from there).
   Four blocks: the hero moment (a thread with the assistant, and the change
   waiting for approval), the two ported screens (consent, approvals), the
   MCP section with its three-step plan, and the three safety facts.
   Nothing in a mock is under 13px. Muted text is #5b6076 or darker on a tint
   and #6b7088 or darker on white.
   ========================================================================== */

/* ---------- section rhythm ---------- */
.cai-page .cai-sec-ask { padding-top: 0; padding-bottom: clamp(56px, 6vw, 80px); }
.cai-page .cai-sec-cards, .cai-page .cai-sec-mcp, .cai-page .cai-sec-strict { padding-top: clamp(44px, 4.5vw, 64px); }
.cai-page .cai-sec-faq { padding-top: clamp(36px, 4vw, 56px); padding-bottom: clamp(36px, 4vw, 56px); }
.cai-page .tq-section { padding: clamp(44px, 4.5vw, 68px) 0; }
.cai-page .tq blockquote { margin: 0; }
.cai-page .closing { padding-top: clamp(20px, 2.5vw, 36px); }
/* left-aligned heads, so the rhythm is not five centred ones */
.cai-page .cai-head { max-width: 760px; margin: 0 0 36px; }
.cai-page .cai-head .sub { margin-inline: 0; }
.cai-page .cai-head .sub a, .cai-mcp-copy .sub a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cai-page .cai-head .sub a:hover, .cai-mcp-copy .sub a:hover { color: var(--ink); }

/* ---------- hero: the thread and the approval ---------- */
.cai-page .hero-moment { display: flex; justify-content: flex-end; padding: 12px 0; }
.cai-page .hero-moment .moment { max-width: 440px; gap: 14px; }
.cai-page .m-from { font-size: 13px; }
.cai-page .m-chip { font-weight: 600; color: var(--blue); }
/* the question, in the person's words: an ink pill on the right, the way a chat puts your own messages */
.cai-u { justify-self: end; margin: 2px 0 10px auto; max-width: 86%; padding: 11px 14px; border-radius: 16px 16px 5px 16px; background: var(--ink); color: #fff; font: 400 15px/1.5 var(--font-body); }
/* the answer, in the assistant's: a tinted card on the left, the count bold and blue */
.cai-a { max-width: 92%; padding: 12px 14px; border-radius: 16px 16px 16px 5px; background: var(--v2-card); }
.cai-a p { margin: 0; font: 400 15px/1.55 var(--font-body); color: var(--ink); }
.cai-a p b { color: var(--blue); font-weight: 700; }
.cai-open { display: inline-block; margin-top: 8px; font: 600 13.5px/1.4 var(--font-display); color: var(--blue); }
.cai-thread { display: flex; flex-direction: column; }
.cai-thread .m-from { margin-bottom: 4px; }
/* the change waiting in Cloutly: a flat tinted card, because it is the attachment to the thread above it */
.cai-page .hero-moment .cai-approve { background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); }
.cai-op { margin: 0; font: 600 15px/1.45 var(--font-display); color: var(--ink); text-wrap: pretty; }
.cai-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.cai-btns b { padding: 8px 14px; border-radius: 9px; background: var(--ink); color: #fff; font: 600 13px/1.3 var(--font-display); }
.cai-btns span { padding: 8px 12px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--v2-line); color: var(--ink); font: 600 13px/1.3 var(--font-display); }
.cai-btns small { margin-left: auto; font: 400 13px/1.4 var(--font-body); color: #5b6076; }
/* the two portraits sit clear of the cards */
@media (min-width: 992px) {
  .cai-page .pp--tl { left: -13%; top: -6%; }
  .cai-page .pp--br { right: -12%; bottom: -5%; }
}

/* ---------- the device: the hand-off line under each answer ---------- */
.cai-handoff { margin: 12px 0 0; }
.cai-handoff .cai-open { margin-top: 0; font-size: 15px; }
.cai-ask-note { margin-top: 20px; max-width: 78ch; font-size: 13px; }

/* ---------- the two screens ---------- */
.cai-shot { padding: 16px 16px 20px; }
.cai-shot-t { margin: 0 0 12px; font: 600 14px/1.3 var(--font-display); color: var(--ink); }
.cai-scopes { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cai-scopes li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--v2-card); font: 500 13.5px/1.35 var(--font-display); color: var(--ink); }
.cai-scopes li i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1.5px #b9bfd2; font: 700 12px/1 var(--font-display); font-style: normal; color: #fff; }
.cai-scopes li.is-on i { background: var(--blue); box-shadow: none; }
.cai-scopes li span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cai-scopes li em { font: 500 13px/1.3 var(--font-display); font-style: normal; color: #5b6076; }
.cai-shot .cai-btns { margin-top: 14px; }
.cai-pend { padding: 12px 14px; border-radius: 12px; background: var(--v2-card); }
.cai-pend + .cai-pend { margin-top: 8px; }
.cai-pend .cai-op { font-size: 14px; }
.cai-meta { display: block; margin-top: 6px; font: 400 13px/1.4 var(--font-body); color: #5b6076; }
.cai-pend .cai-btns { margin-top: 10px; }
.cai-pend.is-done { box-shadow: inset 0 0 0 1px var(--v2-line); background: #fff; }
.cai-pend.is-done .cai-op { color: #5b6076; text-decoration: line-through; text-decoration-color: #b9bfd2; }
.cai-pend.is-done .cai-meta { color: #226b3c; }

/* ---------- the MCP section: copy beside the three steps ---------- */
.cai-mcp { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(320px, 1fr); gap: 32px 56px; align-items: start; }
.cai-mcp-copy .sub + .sub { margin-top: 14px; }
.cai-page .cai-plan { grid-template-columns: 1fr; gap: 26px; margin-top: 10px; }
.cai-page .cai-plan::before { left: 6px; right: auto; top: 6%; bottom: 6%; width: 2px; height: auto; }
.cai-page .cai-plan .plan-step { padding-top: 0; padding-left: 34px; }
.cai-page .cai-plan .plan-step::before { top: 5px; }
.cai-page .cai-plan .plan-step b { letter-spacing: .06em; }
.cai-page .cai-plan .plan-step h3 { font-size: 20px; }

/* ---------- the three facts ---------- */
.cai-page .cai-facts { margin-top: 0; padding: 0; }

/* ---------- breakpoints ---------- */
@media (max-width: 991px) {
  .cai-page .hero-moment { justify-content: center; }
  .cai-mcp { grid-template-columns: 1fr; }
  .cai-page .cai-facts { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cai-page .cards { grid-template-columns: 1fr; }
  .cai-btns small { margin-left: 0; width: 100%; }
}