/* Lower-page illustrations: drawn scenes that explain each benefit and capability.
   Every scene's markup is its finished state, so without script or with reduced motion it
   still reads correctly; illustrations.js only plays the build-up that arrives at it. */
.illo {margin: 0; border-radius: 14px; background: #f3f5f8; overflow: hidden; contain: paint}
/* Only the outer drawing stretches; nested svgs are photo frames that crop at their own size. */
.illo > svg {display: block; width: 100%; height: auto; overflow: visible}
.illo text {font-family: LandingSans, Arial, sans-serif; fill: #15171a}
.illo .sys {font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif}
.illo .muted {fill: #6b7380}
.illo .on-dark {fill: #fff}
.illo .surface {fill: #fff; stroke: #e1e5ea; stroke-width: 1}
.illo .hair {stroke: #e6e9ee; stroke-width: 1}
.illo [data-a] {transform-box: fill-box; transform-origin: center}
.illo [data-origin=left] {transform-origin: left center}
/* Moments that only exist mid-story (a cursor, a message in flight, a superseded state)
   are absent from the finished picture. */
[data-illo] [data-transient] {opacity: 0}
.illo [data-dim] {opacity: .42}

/* Benefits: the scene sits above each column's heading. */
.benefit-list .illo {order: -1; margin-bottom: 24px}

/* Capabilities: a small scene with each definition — above it until there is room beside it. */
.capability-list>div {display: flex; flex-direction: column}
.capability-list .illo {order: -1; max-width: 280px; margin-bottom: 18px}
@media(min-width:1180px) {
  /* Wide enough for the heading's two lines and for each scene to sit beside its text. */
  .capabilities {grid-template-columns: minmax(0,510px) minmax(0,1fr); column-gap: 48px}
  .capability-list>div {display: grid; grid-template-columns: 204px minmax(0,1fr); column-gap: 26px; align-items: start}
  .capability-list>div>dt, .capability-list>div>dd {grid-column: 2}
  .capability-list .illo {grid-column: 1; grid-row: 1 / span 2; max-width: none; margin: 4px 0 0}
}

/* Language band: the exchange plays in order through Alpera; its markup is the finished conversation. */
.lx-hop {display: flex; align-items: center; gap: 9px; margin: -5px 0; font-size: 13px; line-height: 1.3; color: #4b6480}
.lx-back {align-self: flex-end}
.lx-mark {display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #142c4917}
.lx-mark img {display: block}
.lx-reply {position: relative; display: flex; justify-content: flex-end}
.lx-typing {position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 16px; border-radius: 22px; background: #fff; box-shadow: 0 5px 16px #142c4910}
.lx-typing i {width: 7px; height: 7px; border-radius: 50%; background: #9aa9b8; animation: lx-dot 1.2s ease-in-out infinite}
.lx-typing i:nth-child(2) {animation-delay: .15s}
.lx-typing i:nth-child(3) {animation-delay: .3s}
@keyframes lx-dot {0%, 60%, 100% {transform: translateY(0); opacity: .5} 30% {transform: translateY(-3px); opacity: 1}}
@media(max-width:720px) {.lx-hop {font-size: 12px} .lx-typing {height: 40px}}

/* Business: between the pitch and its contact link, a white tile against the grey band. */
.business-intro .illo {max-width: 460px; margin: 28px 0 30px; background: #fff; box-shadow: inset 0 0 0 1px #e3e4e7}

/* Getting started: tools gather beside the conversation as they become useful. */
.getting-started .illo {max-width: 600px; margin: 0 auto 52px; border-radius: 16px}
@media(max-width:720px) {.getting-started .illo {margin-bottom: 34px}}

/* “iMessage” set as the thing it names: an outgoing Messages bubble in Apple's own face.
   Its full stop travels with it, so a narrow screen never strands the punctuation. */
.imessage-word {white-space: nowrap}
.imessage {
  position: relative; display: inline-block; margin: 0 .06em 0 .02em; padding: .02em .36em .1em;
  border-radius: .56em; background: #007aff; color: #fff; line-height: 1.1;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600; letter-spacing: -.01em;
}
/* The tail is one curved shape, so nothing has to paint over the text that follows it. */
.imessage:before {
  content: ''; position: absolute; right: -.24em; bottom: 0; width: .5em; height: .5em;
  background: radial-gradient(circle at 100% 0, transparent .5em, #007aff calc(.5em + .6px));
}