/* ============================================================
   /assets/css/ai.css
   QWQ Digital Studio - AI phone employee page (/ai/).

   Page-specific layout only. The dark house brand (espresso + brass,
   Playfair + DM Sans) comes from /assets/css/qwq-tokens.css, and the
   shared structure (hero, sections, feature cards, process, industry
   cards, trust strip, closing band, section dividers) is reused from
   /assets/css/home.css. The in-page Zoe demo reuses the bubble /
   composer styles from /assets/css/chat-widget.css.

   Load order on the page:
     qwq-tokens.css -> home.css -> chat-widget.css -> ai.css
   ============================================================ */

/* Three-up feature grids on this page (pain / why / honest). */
.feature-grid--three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 22px);
}
@media (max-width: 820px) {
  .feature-grid--three { grid-template-columns: 1fr; }
}

/* ── Hero phone mockup with an example call-summary email ──── */
.ai-phone {
  position: relative;
  width: min(340px, 80vw);
  margin: 0 auto;
  padding: 14px;
  background: var(--bezel);
  border: 1px solid var(--bezel-edge);
  border-radius: 40px;
  box-shadow: var(--shadow-float);
}
.ai-phone__notch {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 6px;
  border-radius: 999px;
  background: var(--bezel-edge);
  z-index: 2;
}
.ai-phone__screen {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 30px 20px 22px;
}

.ai-mail { display: flex; flex-direction: column; gap: 12px; }
.ai-tag {
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-pale);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
  padding: 4px 11px;
}
.ai-mail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
}
.ai-mail__from { color: var(--accent-text); font-weight: 600; }
.ai-mail__time { color: var(--faint); }
.ai-mail__subject {
  font-family: var(--font-display);
  font-size: 1.18rem;
  line-height: 1.2;
  color: var(--ink);
  margin: 2px 0 6px;
}
.ai-mail__rows { display: grid; gap: 9px; margin: 0; }
.ai-mail__rows > div {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 10px;
  align-items: baseline;
}
.ai-mail__rows dt {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.ai-mail__rows dd { margin: 0; font-size: 14.5px; color: var(--text); }
.ai-mail__note {
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.ai-mail__foot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--faint);
}
.ai-mail__foot::before {
  content: "";
  width: 13px; height: 13px;
  background: var(--accent-dim);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.4 11.05 12.25 20.2a5 5 0 0 1-7.07-7.07l9.19-9.19a3 3 0 0 1 4.24 4.24l-9.2 9.19a1 1 0 0 1-1.41-1.41l8.49-8.49'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.4 11.05 12.25 20.2a5 5 0 0 1-7.07-7.07l9.19-9.19a3 3 0 0 1 4.24 4.24l-9.2 9.19a1 1 0 0 1-1.41-1.41l8.49-8.49'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── "What it won't do" line under the capability grid ────── */
.ai-dont {
  max-width: 60ch;
  margin: clamp(22px, 3vw, 32px) auto 0;
  padding: 18px 22px;
  text-align: center;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-2);
  background: color-mix(in srgb, var(--accent-pale) 45%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.ai-dont strong { color: var(--accent-text); }

/* ── Live demo: two-up (web chat + example call) ──────────── */
.ai-demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 30px);
  align-items: stretch;
}
@media (max-width: 900px) {
  .ai-demo-grid { grid-template-columns: 1fr; }
}

/* Inline Zoe panel: reuses chat-widget bubble/composer styles, but lives
   in normal flow as a fixed-height card instead of a floating popover. */
.ai-demo-panel {
  display: flex;
  flex-direction: column;
  height: clamp(440px, 60vh, 560px);
  background: var(--bg-card);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ai-demo-panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 15px;
  background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-card) 100%);
  border-bottom: 1px solid var(--border);
}
.ai-demo-panel__log { min-height: 0; }
.ai-demo-panel__composer { margin-top: auto; }

/* ── Example call card ────────────────────────────────────── */
.ai-call {
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2.4vw, 26px);
}
.ai-call__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.ai-badge {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent-display);
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  padding: 5px 12px;
}

/* Brass audio waveform (decorative motif, gentle idle motion). */
.ai-wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  margin-bottom: 18px;
}
.ai-wave span {
  flex: 1 1 auto;
  width: 3px;
  height: 28%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dim) 100%);
  opacity: 0.85;
  transform-origin: center;
  animation: ai-wave 1.4s ease-in-out infinite;
}
.ai-wave span:nth-child(3n)   { animation-delay: .15s; height: 70%; }
.ai-wave span:nth-child(3n+1) { animation-delay: .35s; height: 45%; }
.ai-wave span:nth-child(4n)   { animation-delay: .55s; height: 92%; }
.ai-wave span:nth-child(5n)   { animation-delay: .25s; height: 60%; }
@keyframes ai-wave {
  0%, 100% { transform: scaleY(0.5); }
  50%      { transform: scaleY(1); }
}

.ai-call__script {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-call__turn { display: flex; flex-direction: column; gap: 4px; max-width: 88%; }
.ai-call__turn--ai { align-self: flex-start; }
.ai-call__turn--caller { align-self: flex-end; align-items: flex-end; }
.ai-call__who {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0 4px;
}
.ai-call__turn--ai .ai-call__who { color: var(--accent-text); }
.ai-call__line {
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 16px;
}
.ai-call__turn--ai .ai-call__line {
  background: var(--accent-pale);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-bottom-left-radius: 5px;
  color: var(--text);
}
.ai-call__turn--caller .ai-call__line {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-bottom-right-radius: 5px;
  color: var(--text-2);
}
.ai-call__foot {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.55;
  color: var(--faint);
}

/* ── Soft pricing card (pilot framing, no numbers) ────────── */
.ai-price-card {
  max-width: 50rem;
  margin: 0 auto;
  padding: clamp(26px, 4vw, 40px);
  text-align: center;
}
.ai-price-card__lead {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0 auto 22px;
  max-width: 44ch;
}
.ai-price-card__list {
  list-style: none;
  margin: 0 auto 26px;
  padding: 0;
  display: grid;
  gap: 13px;
  max-width: 30rem;
  text-align: left;
}
.ai-price-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.97rem;
  color: var(--text);
}
.ai-price-card__list svg {
  flex: none;
  width: 19px; height: 19px;
  margin-top: 2px;
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .ai-wave span { animation: none; transform: scaleY(0.7); }
}

/* ── Symmetric 2x2 capability grid ("What it actually does") ──
   The four cards split evenly into two rows of two, so there is no
   lonely 3+1 orphan card. Collapses to one column on small screens. */
.feature-grid--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .feature-grid--two { grid-template-columns: 1fr; } }

/* ── Anti-orphan headings ──
   Balance the line lengths of the big display headings so the last
   word never drops onto a line by itself. */
.hero h1,
.section-intro h2,
.closing h2 { text-wrap: balance; }

/* ── "Who it's for": four cards, kept symmetric ──
   home.css sizes .industry-row for five cards (repeat(5,1fr)), which on this
   page leaves an empty fifth column on desktop and a 3+1 orphan around 920px.
   This page only ever shows four trades, so override to an even four-up that
   steps down to a balanced 2x2, then a single column. No empty column, no
   lonely card. */
.industry-row { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .industry-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .industry-row { grid-template-columns: 1fr; } }

/* ── "Why an AI": banded image-text comparison ──
   A break from the centred card grids that carry most of the page. Three
   alternating left/right bands (receptionist / voicemail / AI) give the
   middle of the page a visual anchor. Reuses house tokens only. */
.ai-compare {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 20px);
  max-width: 60rem;
  margin: 0 auto;
}
.ai-compare__row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.45fr);
  gap: clamp(20px, 3vw, 42px);
  align-items: center;
  padding: clamp(20px, 2.6vw, 30px) clamp(22px, 3vw, 34px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
/* Flip every second band so the visual alternates side to side. */
.ai-compare__row:nth-child(even) {
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr);
}
.ai-compare__row:nth-child(even) .ai-compare__visual { order: 2; }

.ai-compare__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.ai-compare__icon {
  width: 60px; height: 60px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--accent-pale);
  border: 1px solid var(--border-hi);
  color: var(--accent);
}
.ai-compare__icon svg { width: 30px; height: 30px; }
.ai-compare__tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.ai-compare__body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 1.6vw, 1.4rem);
  color: var(--text);
  margin: 0 0 8px;
}
.ai-compare__body p {
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}
.ai-compare__flag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 8px;
}
/* The recommended band: brass border + tinted ground so it reads as the answer. */
.ai-compare__row--win {
  background: var(--accent-pale);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: var(--shadow-sm);
}
.ai-compare__row--win .ai-compare__icon {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.ai-compare__row--win .ai-compare__tag { color: var(--accent-text); }

@media (max-width: 700px) {
  .ai-compare__row,
  .ai-compare__row:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
  }
  .ai-compare__row:nth-child(even) .ai-compare__visual { order: 0; }
  .ai-compare__visual { flex-direction: row; justify-content: center; }
}