/*
 * AI Assistants (page-ai-chatbot.php), on top of site.css, case-study.css,
 * case-study-wp.css and site-pages.css.
 */

/* ---------- hero ---------- */
.bot-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.ai-trust { margin-top: 22px; font-size: 14.5px; color: var(--dim); }
/* the five assistants, as jump links */
.ai-jump { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: clamp(40px, 5vw, 60px); }
.ai-jump a { display: grid; gap: 8px; align-content: start; padding: 18px 18px 16px; border: 1px solid var(--hair); border-radius: 18px; background: rgba(255,255,255,0.03); color: var(--hi); text-decoration: none;
  transition: transform 400ms var(--ease), border-color 200ms ease, background 200ms ease; }
.ai-jump a:hover { transform: translateY(-3px); border-color: rgba(249,211,66,0.5); background: rgba(249,211,66,0.06); color: var(--hi); }
.ai-jump-n { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--gold); }
.ai-jump-t { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.ai-jump-s { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
@media (max-width: 1000px) { .ai-jump { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ai-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- the five assistants ---------- */
.ai-sec { scroll-margin-top: 80px; }
.ai-intro { margin-bottom: clamp(48px, 5vw, 72px); scroll-margin-top: 100px; }
.ai-intro .h2 { max-width: 20ch; }
.ai-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.ai-flip .ai-media { order: 2; }
.ai-copy .h2 { margin-top: 20px; font-size: clamp(32px, 3.6vw, 52px); }
.ai-copy .lede { margin-top: 20px; }
@media (max-width: 900px) {
  .ai-row { grid-template-columns: minmax(0, 1fr); }
  .ai-flip .ai-media { order: 0; }
}

/* video: a poster with a play button, swapped for the Drive player on click */
.ai-video { position: relative; aspect-ratio: 16 / 9; background: var(--black); }
.ai-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.ai-play { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer;
  background: radial-gradient(60% 70% at 50% 0%, rgba(249,211,66,0.16), transparent 70%), var(--black); }
.ai-play img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease), opacity 300ms ease; }
.ai-play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45)); }
.ai-play-btn { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  background: var(--gold); color: var(--black); box-shadow: 0 0 0 10px rgba(249,211,66,0.22), 0 24px 50px -16px rgba(0,0,0,0.7); transition: transform 400ms var(--ease); }
.ai-play-btn svg { width: 30px; height: 30px; margin-left: 4px; }
.ai-play:hover .ai-play-btn, .ai-play:focus-visible .ai-play-btn { transform: scale(1.08); }
.ai-play:hover img { transform: scale(1.02); }
.ai-play:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
/* no video yet */
.ai-soon { display: grid; place-items: center; text-align: center; padding: 24px;
  background: radial-gradient(60% 70% at 50% 0%, rgba(249,211,66,0.16), transparent 70%), var(--black); }
.ai-soon::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.7;
  background-image: linear-gradient(to right, var(--hair-2) 1px, transparent 1px), linear-gradient(to bottom, var(--hair-2) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 40%, #000, transparent 80%); mask-image: radial-gradient(60% 70% at 50% 40%, #000, transparent 80%); }
.ai-soon > div { position: relative; display: grid; justify-items: center; gap: 16px; }
.ai-soon p { font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -0.03em; color: var(--hi); }
.ai-soon .tl { color: var(--hi); }
.ai-soon .tl:hover { color: var(--gold); border-bottom-color: var(--gold); }
.ai-cap { margin-top: 16px; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.4; color: var(--ink-3); }
.dk .ai-cap { color: var(--tx); }

/* Customer does -> Assistant does -> You get */
.ai-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 30px; }
.ai-steps li { position: relative; display: grid; gap: 8px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.ai-steps small { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); }
.ai-steps li:not(:last-child)::after { content: "\2192"; position: absolute; right: -13px; top: 50%; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background: var(--gold); color: var(--black); font-size: 12px; font-weight: 700; line-height: 1; }
.ai-steps li:last-child { border-color: var(--black); background: var(--black); color: var(--hi); }
.ai-steps li:last-child small { color: var(--gold); }
.dk .ai-steps li { border-color: var(--hair); background: rgba(255,255,255,0.04); color: var(--hi); }
.dk .ai-steps small { color: var(--dim); }
.dk .ai-steps li:last-child { border-color: var(--gold); background: var(--gold); color: var(--black); }
.dk .ai-steps li:last-child small { color: rgba(0,0,0,0.6); }
@media (max-width: 560px) {
  .ai-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ai-steps li:not(:last-child)::after { content: "\2193"; right: auto; left: 50%; top: auto; bottom: -13px; margin: 0 0 0 -11px; }
}

/* ---------- which assistant fits ---------- */
.ai-tint { background: #FFFCF0; color: var(--ink-2); }
.ai-fit .map-row { grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr); }
.ai-fit-head { padding-top: 14px; padding-bottom: 14px; background: var(--black) !important; }
.ai-fit-head .map-k { color: var(--gold); }
.ai-fit-b { font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
@media (max-width: 640px) {
  .ai-fit .map-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ai-fit-head span + span { display: none; }
}

/* ---------- setup steps and privacy ---------- */
.ai-setup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .ai-setup { grid-template-columns: minmax(0, 1fr); } }
.ai-privacy { display: flex; gap: 22px; align-items: flex-start; margin-top: 14px; padding: clamp(24px, 2.6vw, 32px); border: 1px solid rgba(249,211,66,0.4); border-radius: 24px; background: rgba(249,211,66,0.06); }
.ai-privacy-i { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--gold); color: var(--black); }
.ai-privacy-i svg { width: 22px; height: 22px; }
.ai-privacy h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.024em; color: var(--hi); }
.ai-privacy p { margin-top: 8px; max-width: 70ch; font-size: 16px; line-height: 1.65; color: var(--tx); }
@media (max-width: 520px) { .ai-privacy { flex-direction: column; } }

/* ---------- closing ---------- */
.ai-cta { margin-top: 30px; }
.bot .nw { white-space: nowrap; }