/* AI interview expertise, tested where people go off script: on the night, a board of five moments where a person goes off script, each a row with what a Copilot chatbot built in a few hours does (not tested) and what Elly does.
   Each moment is the yellow off-script tag with its number. On a phone a moment heads its row over the two results.
   Without JavaScript, on a phone or under reduced motion, this is the finished board; ai-expertise.js adds .is-armed and shows the rows in turn once in view, within 3.0 s (the captain, 5 Oct), then the Replay. */
/* Opening the Product page it sits closer under the nav, so on a 1440 by 900 screen the whole board is on the first screen and plays there */
main > .ai-expertise:first-child { padding-top: 44px; }
main > .ai-expertise:first-child .section-head { margin-bottom: 36px; }
.ai-expertise .section-head { max-width: 1000px; margin-left: auto; margin-right: auto; text-align: center; }
.ai-expertise .section-head :is(h1, h2) { font-size: clamp(36px, 3.9vw, 54px); }
.ai-expertise .section-head :is(h1, h2) span { display: block; margin-bottom: .18em; font-size: .62em; color: var(--magenta-hot); }
.ai-expertise .section-head > p { max-width: 38em; margin-left: auto; margin-right: auto; }
.ai-expertise .replay-row { max-width: 1040px; margin-left: auto; margin-right: auto; }

/* While a story arms its first state nothing may fade or slide, so the finished board never flashes out before it plays */
.ai-expertise .is-arming, .ai-expertise .is-arming * { transition: none !important; animation: none !important; }
/* Everything keeps its room from the start, so nothing below the board moves */
.ai-expertise .is-armed [data-at] { transition: opacity 260ms, transform 320ms cubic-bezier(.2, .8, .2, 1); }
.ai-expertise .is-armed [data-at]:not(.is-shown) { opacity: 0; transform: translateY(8px); }

/* The moment: what the person suddenly does, under a yellow tag with its number */
.ai-expertise .off-script { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--yellow); font-family: var(--font-heading); font-size: 12.5px; font-weight: 800; line-height: 1.15; letter-spacing: .08em; text-transform: uppercase; color: var(--aubergine); }
.ai-expertise .case-number { flex: none; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--aubergine); font-size: 1.05em; letter-spacing: 0; color: var(--yellow); }

/* The board: a head naming the two sides, then one row per moment */
.aix-board { max-width: 1040px; margin: 0 auto; padding: 8px 28px 12px; border-radius: 22px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line-on-dark); }
.aix-board-head, .aix-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .95fr) minmax(0, 1.25fr); gap: 20px; align-items: center; }
.aix-board-head { margin: 0; padding: 16px 0; font-family: var(--font-heading); font-size: 14px; font-weight: 800; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-on-dark); }
.aix-board-head > span { display: flex; align-items: center; gap: 10px; }
.aix-head-elly { color: #fff; }
.aix-board-head .avatar { flex: none; width: 30px; height: 30px; }
.ai-expertise .avatar.bot { display: grid; place-items: center; border-radius: 50%; background: #5F6366; color: #fff; }
.aix-board-head .avatar.bot .icon { width: 16px; height: 16px; }
.aix-rows { margin: 0; padding: 0; list-style: none; }
.aix-row { padding: 16px 0; border-top: 1px solid var(--line-on-dark); }
.aix-cell { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 1.35; }
.aix-cell.is-bot { font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--faint-on-dark); }
.aix-cell.is-bot i { flex: none; width: 16px; height: 2px; border-radius: 1px; background: #5F6366; }
.aix-cell.is-elly { font-family: var(--font-heading); font-weight: 700; color: #fff; }

@media (max-width: 720px) {
  .ai-expertise .section-head :is(h1, h2) { font-size: 31px; }
  .ai-expertise .section-head :is(h1, h2) span { font-size: 25px; }
  .aix-board { padding: 4px 16px 8px; border-radius: 18px; }
  /* On a phone each moment is a heading over its two results, the chatbot's and Elly's */
  .aix-board-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; font-size: 11.5px; }
  .aix-head-moment { display: none !important; }
  /* The two sides keep their names and give up their avatars, so a long name such as the Spanish one wraps to two lines at most */
  .ai-expertise .aix-board-head .avatar { display: none; }
  .aix-board-head { letter-spacing: .02em; }
  .aix-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px 12px; padding: 14px 0; }
  .aix-moment { grid-column: 1 / -1; }
  .ai-expertise .off-script { font-size: 11px; }
  .aix-cell { font-size: 14px; }
  .aix-cell.is-bot { font-size: 12.5px; }
}
@media (max-width: 374px) {
  .ai-expertise .section-head :is(h1, h2) { font-size: min(30px, 8.3vw); }
  .ai-expertise .section-head :is(h1, h2) span { font-size: 23px; }
}