/* ==========================================================================
   ai-reputation.css — /ai-reputation-management. Loads after feature-v2,
   feature-v3, show.css and home.css.
   Four blocks: the hero moment (a review and the draft beside it), the review
   picker (five reviews, four outcomes each, stacked in one grid cell), the
   three shallow cards, and the Connected AI split with its chat mock.
   Nothing in a mock is under 13px. Muted text is #5b6076 or darker on a tint
   and #6b7088 or darker on white.
   ========================================================================== */

/* ---------- section rhythm ---------- */
.airep-page .airep-sec-pick { padding-top: 0; padding-bottom: clamp(56px, 6vw, 80px); }
.airep-page .airep-sec-cards, .airep-page .airep-sec-cai, .airep-page .airep-sec-ways { padding-top: clamp(44px, 4.5vw, 64px); }
.airep-page .airep-sec-proof { padding-top: clamp(44px, 4.5vw, 64px); }
.airep-page .airep-sec-faq { padding-top: clamp(36px, 4vw, 56px); padding-bottom: clamp(36px, 4vw, 56px); }
.airep-page .closing { padding-top: clamp(20px, 2.5vw, 36px); }
.airep-page .airep-head { max-width: 760px; margin: 0 0 36px; }
.airep-page .airep-head .sub { margin-inline: 0; }
.airep-page .ways { margin-top: 0; }

/* ---------- shared atoms ---------- */
.airep-avv { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #5a49d6, #6a5ae0); color: #fff; font: 800 13px/1 var(--font-display); letter-spacing: .01em; }
.airep-stars { display: inline-flex; gap: 1px; vertical-align: -1px; font-size: 13px; line-height: 1; }
.airep-stars i { font-style: normal; color: #e2951f; }
.airep-stars i.is-off { color: #ccd0dc; }
.airep-cap { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--v2-line); font: 400 13px/1.45 var(--font-body); color: #5b6076; }
.airep-btns, .airep-tile-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.airep-btns b, .airep-tile-btns b { padding: 8px 14px; border-radius: 9px; background: var(--ink); color: #fff; font: 600 13px/1.3 var(--font-display); }
.airep-btns span, .airep-tile-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); }
.airep-btns small { margin-left: auto; font: 400 13px/1.4 var(--font-body); color: #5b6076; }

/* ---------- hero: the review and the draft ---------- */
.airep-page .hero-moment { display: flex; justify-content: flex-end; padding: 12px 0; }
.airep-page .hero-moment .moment { max-width: 440px; gap: 14px; }
.airep-page .m-from { font-size: 13px; }
.airep-rev-h { display: flex; align-items: center; gap: 10px; }
.airep-rev-h > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.airep-rev-h b { font: 600 14px/1.3 var(--font-display); color: var(--ink); }
.airep-rev blockquote { margin: 10px 0 0; font: 400 15.5px/1.55 var(--font-body); color: var(--ink); }
.airep-page .hero-moment .airep-draft { background: #eef2ff; box-shadow: inset 0 0 0 1px rgba(0, 61, 255, .12); }
.airep-draft p { margin: 0; font: 400 15px/1.55 var(--font-body); color: var(--ink); }
@media (min-width: 992px) {
  .airep-page .pp--tl { left: -13%; top: -6%; }
  .airep-page .pp--br { right: -12%; bottom: -5%; }
}

/* ---------- the picker ---------- */
.airep-pick { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr); gap: 18px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow); padding: 20px; }
.airep-revs { display: grid; gap: 8px; align-content: start; }
.airep-r { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); text-align: left; cursor: pointer; transition: box-shadow .22s var(--ease-out), background-color .22s var(--ease-out); }
.airep-r:hover { box-shadow: inset 0 0 0 1px #b9bfd2; }
.airep-r.is-on { background: #f0f4ff; box-shadow: inset 0 0 0 1.5px var(--blue); }
.airep-r:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.no-motion .airep-r { transition: none; }
.airep-r-body { display: grid; gap: 3px; min-width: 0; }
.airep-r-who { font: 500 13px/1.4 var(--font-display); color: #5b6076; }
.airep-r-text { font: 400 14.5px/1.5 var(--font-body); color: var(--ink); }
.airep-outs { display: grid; }
.airep-out { grid-area: 1 / 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; visibility: hidden; opacity: 0; transition: opacity .28s var(--ease-out); }
.airep-out.is-on { visibility: visible; opacity: 1; }
.no-motion .airep-out { transition: none; }
.airep-tile { padding: 14px 16px; border-radius: 14px; background: var(--v2-card); }
.airep-tile:first-child, .airep-tile:nth-child(2) { grid-column: 1 / -1; }
.airep-tile-l { display: block; margin-bottom: 8px; font: 600 13px/1.4 var(--font-display); color: var(--ink); }
.airep-tile-l em { display: block; font: 400 13px/1.4 var(--font-body); font-style: normal; color: #5b6076; }
.airep-draft-p { margin: 0; font: 400 15px/1.55 var(--font-body); color: var(--ink); }
.airep-tile-btns { margin-top: 10px; }
.airep-ask-p { margin: 0; font: 400 15px/1.5 var(--font-body); color: var(--ink); }
.airep-ask-p b, .airep-shot-p b { color: var(--blue); font-weight: 700; }
.airep-credit { margin: 0; font: 600 15px/1.4 var(--font-display); color: var(--ink); }
.airep-sig { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 500 14px/1.45 var(--font-display); color: var(--ink); }
.airep-sig i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #c6cbda; transform: translateY(-1px); }
.airep-sig.is-good i { background: #1fb07a; }
.airep-sig.is-warn i { background: #e2951f; }
.airep-sig.is-crit i { background: #c93a3a; }
.airep-sig.is-watch i { background: #7866cc; }
.airep-note { margin-top: 20px; max-width: 78ch; font-size: 13px; }

/* ---------- the three cards ---------- */
.airep-page .airep-cards .card { min-height: 0; }
.airep-page .card > p a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.airep-page .card > p a:hover { color: var(--ink); }
.airep-shot { padding: 14px 14px 18px; }
.airep-shot-t { margin: 0 0 10px; font: 600 13.5px/1.3 var(--font-display); color: var(--ink); }
.airep-tones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.airep-tones span { padding: 5px 10px; border-radius: 999px; background: var(--v2-card); font: 500 13px/1.3 var(--font-display); color: #5b6076; }
.airep-tones span.is-on { background: #f0f4ff; color: var(--blue); box-shadow: inset 0 0 0 1px rgba(0, 61, 255, .3); }
.airep-tones b { margin-left: auto; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: #fff; font: 600 13px/1.3 var(--font-display); }
.airep-shot-p { margin: 0; font: 400 14px/1.5 var(--font-body); color: var(--ink); }
.airep-shot-q { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: var(--v2-card); font: 500 14px/1.4 var(--font-display); color: var(--ink); }
.airep-asst { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.airep-asst li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--v2-card); font: 500 13.5px/1.3 var(--font-display); color: var(--ink); }
.airep-asst b { padding: 4px 8px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--v2-line); font: 600 13px/1.3 var(--font-display); color: #5b6076; }
.airep-asst b.is-hit { background: #ddf7ea; color: #0c7a52; box-shadow: none; }

/* ---------- Connected AI: copy beside the chat ---------- */
.airep-cai { display: grid; grid-template-columns: minmax(300px, 1.05fr) minmax(300px, .95fr); gap: 32px 56px; align-items: center; }
.airep-cai-copy .sub + .sub { margin-top: 14px; }
.airep-cai-copy .sub a, .airep-hand a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.airep-cai-copy .sub a:hover, .airep-hand a:hover { color: var(--ink); }
.airep-chat { display: flex; flex-direction: column; padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 13, 25, .06), 0 24px 50px -30px rgba(15, 13, 25, .35); }
.airep-chat .m-from { margin-bottom: 6px; }
.airep-u { align-self: flex-end; margin: 6px 0; 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); }
.airep-a { max-width: 92%; margin: 4px 0; padding: 12px 14px; border-radius: 16px 16px 16px 5px; background: var(--v2-card); }
.airep-a p { margin: 0; font: 400 15px/1.55 var(--font-body); color: var(--ink); }
.airep-a p b { color: var(--blue); font-weight: 700; }
.airep-open { display: inline-block; margin-top: 8px; font: 600 13.5px/1.4 var(--font-display); color: var(--blue); }
.airep-hand { margin-top: 34px; max-width: 70ch; font: 400 17px/1.6 var(--font-body); color: var(--v2-body); }

/* ---------- breakpoints ---------- */
@media (max-width: 991px) {
  .airep-page .hero-moment { justify-content: center; }
  .airep-pick { grid-template-columns: 1fr; }
  .airep-cai { grid-template-columns: 1fr; }
  .airep-page .airep-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .airep-page .airep-cards { grid-template-columns: 1fr; }
  .airep-out { grid-template-columns: 1fr; }
  .airep-page .ways { grid-template-columns: 1fr; }
  .airep-page .way + .way { border-left: 0; border-top: 1px solid var(--v2-line); }
  .airep-btns small { margin-left: 0; width: 100%; }
}