/* Intellica homepage — real people having real conversations (client feedback, 2026-10-17). Loaded by index.html.
   Replaces the how-it-works steps (archived whole at site/_archive/how-it-works.html). Charlie: "make it about the
   examples. The real conversations should be the centerpiece (especially with photos), with annotations about what's
   happening." The pattern is conversion.ai's "AI agents for MOps teams" module (Calvin's pick): one box, a list of stories
   on the left (an emoji, a title, a few lines on the open one, a progress line while it moves on by itself) and the
   conversation on the right. Calvin's second pass (same day): one unified box, stories titled like stories, iOS emoji for
   icons, the list and the pane the same height, and slower threads with a skip button.
   Grey = the customer, iMessage blue = the concierge (the real iMessage blue, as everywhere on the page). The notes between
   bubbles are ours, in the page's grey. Script: examples.js. */

.cv { padding: 124px 0 100px; }
.cv .wrap { max-width: 1240px; }
.cv-head { text-align: center; margin-bottom: 56px; }
.cv-sub { max-width: 640px; margin: 16px auto 0; }   /* the client's line (2026-10-19), one sentence a line */
.cv-sub-m { display: none; }

/* ---------- the box: the story list sets the height, the pane fills the rest ---------- */
.cv-mod { display: grid; grid-template-columns: minmax(340px, 41%) minmax(0, 1fr); overflow: hidden; border-radius: 26px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.cv-side { padding: 26px 40px 30px; background: color-mix(in oklab, var(--ground) 72%, #fff); border-right: 1px solid var(--line); }
.cv-main { position: relative; min-height: 0; }
.cv-panel { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--surface); }

/* ---------- the stories ---------- */
.cv-tabs { display: flex; flex-direction: column; }
.cv-tab { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-items: center;
  width: 100%; margin: 0; padding: 20px 2px 21px; border: 0; border-bottom: 1px solid var(--line); background: none;
  font: inherit; text-align: left; color: var(--ink-2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cv-tab:last-child { border-bottom-color: transparent; }
.cv-tab:focus-visible { outline: none; }
.cv-tab:focus-visible .cv-ic { box-shadow: 0 0 0 3px color-mix(in oklab, var(--hero) 30%, transparent); }
/* the icon: an iOS emoji on a small tile (Calvin) */
.cv-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(2,11,36,.05);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 21px; line-height: 1;
  transition: background .25s, border-color .25s, box-shadow .25s; }
.cv-lb { font-size: 18.5px; line-height: 1.3; letter-spacing: -.012em; transition: color .25s; }
@media (hover: hover) { .cv-tab:not([aria-selected="true"]):hover .cv-lb { color: var(--ink); } }
/* the open story's few lines slide open under its title (grid-rows 0fr → 1fr). Every one is held to the same height
   (examples.js measures the longest), so the list, and the box, never change height as the stories change */
.cv-nt { grid-column: 2; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s var(--ease), opacity .45s var(--ease); }   /* one curve: the text moves with its space */
.cv-nt > span { min-height: 0; overflow: hidden; }
.cv-nt > span > span { display: block; height: var(--cv-nt-h, auto); padding-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--ink-3); }
.cv-tab[aria-selected="true"] { color: var(--ink); cursor: default; }
.cv-tab[aria-selected="true"] .cv-ic { border-color: color-mix(in oklab, var(--hero) 20%, transparent); background: var(--hero-tint); }
.cv-tab[aria-selected="true"] .cv-lb { font-weight: 500; }
.cv-tab[aria-selected="true"] .cv-nt { grid-template-rows: 1fr; opacity: 1; }
/* the progress line: runs along the open story's rule while the box moves on by itself */
.cv-pg { position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* ---------- the conversation ---------- */
.cv-top { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 18px 20px 13px;
  border-bottom: 1px solid var(--line); background: #FAFAFB; }
.cv-av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 600; letter-spacing: .02em;
  color: #fff; background: linear-gradient(180deg, #A9AFBC, #878D9A); }
.cv-name { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; line-height: 1.2; color: var(--ink); }
.cv-name b { font-weight: 500; }
.cv-name svg { width: 6px; height: 10px; color: var(--ink-3); }
.cv-msgs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 0 22px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.cv-col { max-width: 580px; margin: 0 auto; padding: 0 30px; display: flex; flex-direction: column; }

/* bubbles: exactly iOS, the tail only on the last bubble of a run */
.cv-b { position: relative; max-width: 76%; margin-top: 9px; padding: 9px 14px 10px; border-radius: 19px; font-size: 15.5px; line-height: 1.38;
  letter-spacing: -.006em; overflow-wrap: anywhere; }
.cv-b.in { align-self: flex-start; background: var(--bubble-in); color: #0B0B0F; }
.cv-b.out { align-self: flex-end; background: var(--blue); color: #fff; }
.cv-b.cont, .cv-ph.cont { margin-top: 2px; }
.cv-b.tail.out { border-bottom-right-radius: 5px; }
.cv-b.tail.in { border-bottom-left-radius: 5px; }
.cv-b.tail::after { content: ""; position: absolute; bottom: 0; width: 17px; height: 18px; pointer-events: none; }
.cv-b.tail.out::after { right: -9px; background: radial-gradient(17px 18px at 100% 0, transparent 96%, var(--blue) 100%); }
.cv-b.tail.in::after { left: -9px; background: radial-gradient(17px 18px at 0 0, transparent 96%, var(--bubble-in) 100%); }
.cv-b u { text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* a photo the customer sent */
.cv-ph { align-self: flex-start; width: min(236px, 64%); margin: 9px 0 0; border-radius: 18px; overflow: hidden; background: var(--bubble-in); }
.cv-ph img { width: 100%; height: auto; }
/* the customer typing, before each of their messages */
.cv-typ { align-self: flex-start; display: inline-flex; gap: 5px; margin-top: 9px; padding: 13px 15px; border-radius: 19px; background: var(--bubble-in); }
.cv-typ i { width: 8px; height: 8px; border-radius: 50%; background: #8E8E93; animation: cv-typ 1s ease-in-out infinite; }   /* as the hero's window: one wave per typing beat */
.cv-typ i:nth-child(2) { animation-delay: .15s; }
.cv-typ i:nth-child(3) { animation-delay: .3s; }
@keyframes cv-typ { 0%, 60%, 100% { opacity: .35; translate: 0 0; } 30% { opacity: 1; translate: 0 -2px; } }
/* a Loved tapback on the bubble before it */
.cv-tb { position: absolute; top: -13px; left: -15px; width: 30px; height: 25px; border-radius: 13px; display: grid; place-items: center;
  background: var(--bubble-in); box-shadow: 0 0 0 2px var(--surface); }
.cv-tb svg { width: 14px; height: 14px; }
.cv-b.out.loved { margin-top: 16px; }
.cv-tb.pop { animation: cv-pop .5s var(--ease) both; }
@keyframes cv-pop { 0% { scale: 0; } 60% { scale: 1.2; } 100% { scale: 1; } }
/* a time gap, the way iMessage stamps it */
.cv-st { align-self: center; margin: 20px 0 4px; font-size: 12px; line-height: 1.3; color: var(--ink-3); text-align: center; }
.cv-st b { font-weight: 600; }
/* our notes about what's happening, between the bubbles (conversion.ai's "Tool activity" line) */
.cv-an { align-self: stretch; display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 5px; font-size: 13.5px; line-height: 1.4; color: var(--ink-3); }
.cv-an svg { width: 15px; height: 15px; flex: none; margin-top: 1px; fill: none; stroke: var(--hero); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cv-an + .cv-b, .cv-an + .cv-ph, .cv-an + .cv-typ { margin-top: 6px; }
/* each piece arrives as the thread plays */
.cv-col > .arrive { animation: cv-in .38s var(--ease) both; }   /* the hero's window arrives the same way */
@keyframes cv-in { from { opacity: 0; translate: 0 10px; } }

/* the composer, for the look of it */
.cv-cmp { flex: none; padding: 10px 20px 16px; }
.cv-cmp > div { max-width: 580px; margin: 0 auto; padding: 0 10px; display: flex; align-items: center; gap: 10px; }
.cv-cmp .pl { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #E9E9EB; color: #8A8A8E; }
.cv-cmp .pl svg { width: 13px; height: 13px; }
/* Calvin: skip lives in the message box. While a thread plays, "skip to end" sits there as a drafted message, and
   "sending" it shows the rest of the thread; once it's all there, the draft reads "replay". Nothing is sent anywhere. */
.cv-fd { flex: 1; min-width: 0; height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px 0 14px;
  border: 1px solid var(--line-2); border-radius: 18px; background: var(--surface); font: inherit; font-size: 14.5px; color: var(--ink);
  text-align: left; cursor: pointer; transition: border-color .2s; }
.cv-fd:hover { border-color: color-mix(in oklab, var(--ink) 30%, transparent); }
.cv-fd:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--blue) 28%, transparent); }
.cv-fd .tx { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cv-fd .tx::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -.2em; background: var(--blue);
  animation: cv-caret 1.1s steps(1) infinite; }   /* iMessage's blue caret */
@keyframes cv-caret { 50% { opacity: 0; } }
.cv-fd .send { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--blue); transition: background .2s, scale .2s var(--ease); }
.cv-fd .send svg { width: 14px; height: 14px; }
.cv-fd:hover .send { background: var(--blue-deep); scale: 1.08; }
.cv-fd:active .send { scale: .94; }
.cv-fd[disabled] { cursor: default; color: #A1A1A6; }
.cv-fd[disabled] .send, .cv-fd[disabled] .tx::after { display: none; }

.cv-mnote { display: none; }
.cv .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- smaller laptops: a narrower list ---------- */
@media (max-width: 1100px) {
  .cv-mod { grid-template-columns: minmax(300px, 40%) minmax(0, 1fr); }
  .cv-side { padding: 22px 28px 26px; }
  .cv-lb { font-size: 17px; }
  .cv-col { padding: 0 22px; }
}
/* ---------- phone: the stories become a swipeable chip row across the top of the box ---------- */
@media (max-width: 860px) {
  .cv { padding: 88px 0 72px; }
  .cv-head { margin-bottom: 30px; }
  .cv-mod { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
  .cv-side { padding: 14px 0 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .cv-tabs { flex-direction: row; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 14px; scrollbar-width: none; padding: 2px 14px 4px; }
  .cv-tabs::-webkit-scrollbar { display: none; }
  .cv-tab { flex: none; width: auto; display: flex; gap: 8px; padding: 7px 14px 7px 8px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); scroll-snap-align: start; }
  .cv-tab:last-child { border-bottom-color: var(--line); }
  .cv-ic { width: 26px; height: 26px; border: 0; box-shadow: none; background: none; font-size: 18px; }
  .cv-lb { font-size: 15px; white-space: nowrap; }
  .cv-nt, .cv-pg { display: none; }
  .cv-tab[aria-selected="true"], .cv-tab[aria-selected="true"] .cv-lb { background: var(--ink); border-color: var(--ink); color: #fff; }
  .cv-tab[aria-selected="true"] .cv-lb { background: none; }
  .cv-tab[aria-selected="true"] .cv-ic { background: none; }
  .cv-mnote { display: block; min-height: 4.4em; margin: 0; padding: 10px 16px 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
  .cv-main { height: 560px; }
  .cv-col { padding: 0 16px; }
  .cv-b { max-width: 82%; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .cv-col > .arrive, .cv-tb.pop { animation: none; }
  .cv-nt { transition: none; }
  .cv-fd .tx::after { animation: none; }
}

/* ---------- phones (Calvin, 2026-10-17): a row of the six emoji to pick from; the picked story's title shows under it, then
   its conversation. No subheads (the section line and the story notes stay on desktop). ---------- */
@media (max-width: 860px) {
  .cv-head { margin-bottom: 24px; }
  .cv-head .h2 { text-wrap: balance; }   /* "real people having / real conversations." (Calvin): the even split, no markup change */
  .cv-sub { display: none; max-width: 330px; margin: 12px auto 0; font-size: 15.5px; line-height: 1.5; }
  .cv-sub.cv-sub-m { display: block; }   /* the same line, left to wrap at the phone's width (it breaks at the full stop) */
  .cv-side { padding: 16px 14px 0; }
  .cv-tabs { justify-content: center; gap: clamp(6px, 1.8vw, 14px); overflow: visible; padding: 0; scroll-snap-type: none; }   /* a tight row, even on a tablet */
  .cv-tab, .cv-tab:last-child { flex: 1 1 0; max-width: 54px; aspect-ratio: 1; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); }
  .cv-tab:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--hero) 30%, transparent); }
  .cv-tab .cv-ic { width: auto; height: auto; font-size: 24px; }
  .cv-tab .cv-lb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* still the button's name */
  .cv-tab[aria-selected="true"] { border-color: var(--hero); background: var(--hero-tint); box-shadow: 0 0 0 1px var(--hero); }
  .cv-top { display: none; }   /* Calvin: no contact bar on phones; the title above already says whose story it is */
  .cv-mnote { display: flex; flex-direction: column; justify-content: center;   /* held to the longest title's height (examples.js), a short one sits in the middle */
    min-height: 0; margin: 0; padding: 16px 4px; text-align: center; font-family: var(--display); font-weight: var(--display-w);
    font-variation-settings: var(--display-fvs); font-size: 24px; line-height: 1.15; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
}

/* phones: the section rhythm, about a third tighter (Calvin, 2026-10-17: "all sections a bit too spaced on mobile") */
@media (max-width: 640px) { .cv { padding: 66px 0 48px; } }