/* Humantic AI · /solutions tab visuals (K-328, Oct 20). One self-running visual per team (views/v2/solutions/team-visual.ejs),
   driven by team-visuals.js. Replaces the shared /miia card in the framed box: the visual IS the frame now, so the empty box around
   a small card is gone, and it sits beside the words at 1280x720.
   Brand only: gold #FFC61E, gold 300 #FFE8A5, violet #341D99 (focus only), ink #110A33, lavender #DDD6FF, mist #F6F4FF,
   cream #FFF4D2, slate #5B6478, white. Text 12px minimum. Motion: transform and opacity only, 150-300 ms moves, ease-out quint. */

/* ---------- hero grid: words left, a wider visual right (desktop) ---------- */
@media (min-width: 992px) {
  html body section.section_miia-hero.hxh.sl-hxh .miia_hero-component { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); column-gap: 48px; }
  html body section.section_miia-hero.hxh.sl-hxh { padding-bottom: 40px; }
}

/* ---------- shared frame ---------- */
.tv { --t-ink: #110A33; --t-gold: #FFC61E; --t-g3: #FFE8A5; --t-lav: #DDD6FF; --t-mist: #F6F4FF; --t-cream: #FFF4D2; --t-slate: #5B6478;
  --t-line: rgba(17,10,51,.1); --t-ease: cubic-bezier(.22,1,.36,1); --t-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  position: relative; margin: 0; width: 100%; height: 420px; border-radius: 24px; background: #fff; border: 1px solid rgba(52,29,153,.18);
  box-shadow: 0 12px 32px -12px rgba(17,10,51,.22); overflow: hidden; isolation: isolate; container-type: inline-size; container-name: tv;
  font: 500 13px/1.4 Manrope, Arial, sans-serif; color: var(--t-ink); text-align: left; }
.tv *, .tv *::before, .tv *::after { box-sizing: border-box; }
.tv p, .tv ol, .tv pre { margin: 0; }
.tv i, .tv em { font-style: normal; }
.tv img { display: block; flex: none; }
.tv svg { display: block; }
.tv-stage { position: absolute; inset: 0; pointer-events: none; cursor: default; }
.tv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tv-ttl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tv-ttl b { min-width: 0; font: 700 16px/1.2 "Cabinet Grotesk", Cabinetgrotesk, Manrope, Arial, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-ttl span { font-size: 12px; color: var(--t-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-av { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--t-g3); color: var(--t-ink); font: 800 12px/1 Manrope, Arial, sans-serif; }
.tv-co { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--t-lav); color: var(--t-ink); font: 800 12px/1 Manrope, Arial, sans-serif; font-style: normal; }
.tv-co.is-real { background: var(--t-ink); color: var(--t-gold); }
.tv-live { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--t-gold); box-shadow: 0 0 0 3px rgba(255,198,30,.3); animation: tvLive 1.6s ease-in-out infinite; }
@keyframes tvLive { 50% { opacity: .45; } }

/* the step model: a moving piece (.d) waits hidden while the figure is armed and shows once its step class (sN) is on */
.tv .d { transition: opacity .24s var(--t-ease), transform .3s var(--t-ease); transition-delay: var(--dl, 0ms); }
.tv.is-armed .d { opacity: 0; transform: var(--from, translateY(8px)); }
.tv.s1 .d[data-s="1"], .tv.s2 .d[data-s="2"], .tv.s3 .d[data-s="3"], .tv.s4 .d[data-s="4"], .tv.s5 .d[data-s="5"],
.tv.s6 .d[data-s="6"], .tv.s7 .d[data-s="7"], .tv.s8 .d[data-s="8"], .tv.s9 .d[data-s="9"], .tv.s10 .d[data-s="10"] { opacity: 1; transform: none; }
/* end of a loop: the moving pieces fade together (the page or sheet underneath stays), then snap back to step 0 with no transition */
.tv.is-armed.is-out .d { opacity: 0 !important; transform: none !important; transition: opacity .2s ease-out !important; transition-delay: 0ms !important; }
.tv.is-snap, .tv.is-snap *, .tv.is-snap *::before, .tv.is-snap *::after { transition: none !important; animation: none !important; }
.tv.is-paused *, .tv.is-paused *::before, .tv.is-paused *::after { animation-play-state: paused !important; }
/* words of a written line appear one after another */
.tv .tv-w { display: inline; --from: translateY(3px); --dl: calc(var(--w) * 34ms); transition-duration: .18s, .22s; }

/* pause button (WCAG 2.2.2): static label, aria-pressed carries the state */
.tv-pause { position: absolute; z-index: 5; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: var(--t-ink); color: #fff; cursor: pointer; transition: transform .16s var(--t-ease), background-color .16s ease; }
.tv-pause::before { content: ""; position: absolute; inset: -6px; }
.tv-pause svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tv-pause .i-play { display: none; fill: currentColor; stroke: none; }
.tv-pause[aria-pressed="true"] .i-pause { display: none; }
.tv-pause[aria-pressed="true"] .i-play { display: inline; }
.tv-pause:active { transform: scale(.96); }
.tv-pause:focus-visible { outline: 2px solid #341D99; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .tv-pause:hover { background: #341D99; } }
.tv-pause[hidden] { display: none; }

/* ================= SALES: LinkedIn profile + the extension panel + Draft in Outlook ================= */
.tvs-bar { position: relative; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 52px 0 12px; background: var(--t-mist); border-bottom: 1px solid var(--t-line); }
.tvs-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: #fff; font-size: 12px; color: var(--t-slate); white-space: nowrap; overflow: hidden; }
.tvs-url img { border-radius: 3px; }
.tvs-ext { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--t-line); transition: box-shadow .2s ease; }
.tv.s3 .tvs-ext { box-shadow: inset 0 0 0 2px var(--t-gold); animation: tvPop .3s var(--t-ease); }
@keyframes tvPop { 40% { transform: scale(.9); } }
.tvs-page { position: absolute; inset: 48px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) 292px; }
.tvs-prof { position: relative; min-width: 0; padding: 0 20px 16px; overflow: hidden; }
.tvs-cover { position: relative; height: 72px; margin: 0 -20px; background-color: var(--t-ink); background-image: radial-gradient(rgba(255,198,30,.34) 1px, transparent 1.3px); background-size: 14px 14px; }
.tvs-cover-co { position: absolute; right: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: #fff; font: 700 12px/1.2 Manrope, Arial, sans-serif; }
.tvs-exp i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--t-ink); color: var(--t-gold); font: 800 12px/1 Manrope, Arial, sans-serif; }
.tvs-ava { position: absolute; top: 34px; left: 20px; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; background: var(--t-g3); font: 700 24px/1 "Cabinet Grotesk", Cabinetgrotesk, Manrope, Arial, sans-serif; }
.tvs-id { padding-top: 40px; }
.tvs-name { display: flex; align-items: baseline; gap: 8px; }
.tvs-name b { font: 700 19px/1.2 "Cabinet Grotesk", Cabinetgrotesk, Manrope, Arial, sans-serif; }
.tvs-name span { font-size: 12px; color: var(--t-slate); }
.tvs-head { margin-top: 2px; font-size: 14px; }
.tvs-loc { margin-top: 2px; font-size: 12px; color: var(--t-slate); }
.tvs-btns { display: flex; gap: 8px; margin-top: 10px; }
.tvs-btns span { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--t-ink); font: 800 12px/1 Manrope, Arial, sans-serif; }
.tvs-btns .is-pri { background: var(--t-ink); color: #fff; }
.tvs-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--t-line); display: grid; gap: 8px; }
.tvs-sec-h { font: 800 13px/1.2 Manrope, Arial, sans-serif; }
.tvs-exp { display: flex; align-items: center; gap: 10px; }
.tvs-exp i { width: 32px; height: 32px; border-radius: 8px; font-size: 14px; }
.tvs-exp i.is-b { background: var(--t-cream); color: var(--t-ink); }
.tvs-exp span { display: grid; min-width: 0; }
.tvs-exp b { font-size: 13px; }
.tvs-exp em { font-size: 12px; color: var(--t-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tvs-disc, .tvs-do, .tvs-cta { --from: translateY(8px); }
.tvs-panel { --from: translateX(104%); position: relative; z-index: 2; display: grid; grid-template-columns: 30px minmax(0, 1fr); min-width: 0; background: #fff; box-shadow: -1px 0 0 var(--t-line), -16px 0 32px -20px rgba(17,10,51,.35); }
.tvs-rail { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 14px; background: var(--t-gold); }
.tvs-rail svg { width: 15px; height: 15px; fill: none; stroke: var(--t-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tvs-pbody { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 12px 12px; }
.tvs-ph img { width: auto; height: 14px; }
.tvs-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tvs-who i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--t-g3); font: 800 12px/1 Manrope, Arial, sans-serif; }
.tvs-who span, .tvs-disc span, .tvs-do span { display: grid; min-width: 0; }
.tvs-who b { font-size: 14px; line-height: 1.2; }
.tvs-who em, .tvs-disc em { font-size: 12px; color: var(--t-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvs-disc { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: var(--t-cream); }
.tvs-d { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--t-gold); font: 700 20px/1 "Cabinet Grotesk", Cabinetgrotesk, Manrope, Arial, sans-serif; }
.tvs-disc b { font-size: 13px; line-height: 1.2; }
.tvs-sh { margin: 0 -12px; padding: 5px 12px; background: var(--t-ink); color: #fff; font: 800 12px/1.3 Manrope, Arial, sans-serif; --from: none; }
.tvs-do { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.35; }
.tvs-do i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--t-gold); color: var(--t-ink); }
.tvs-do.is-no i { background: var(--t-lav); }
.tvs-do i svg { width: 11px; height: 11px; }
.tvs-do em { font-weight: 800; }
.tvs-cta { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; border-radius: 999px; background: var(--t-ink); color: #fff; font: 800 13px/1 Manrope, Arial, sans-serif; }
.tvs-cta img { border-radius: 3px; }
.tv.s9 .tvs-cta { background: var(--t-gold); color: var(--t-ink); animation: tvPress .3s var(--t-ease); }
@keyframes tvPress { 45% { transform: scale(.94); } }
.tvs-mail { --from: translateY(28px); position: absolute; z-index: 3; right: 14px; bottom: 12px; width: 360px; border-radius: 14px; background: #fff; border: 1px solid var(--t-line); box-shadow: 0 32px 64px -24px rgba(17,10,51,.35), 0 2px 8px rgba(17,10,51,.08); overflow: hidden; }
.tvs-mh { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; background: var(--t-ink); color: #fff; }
.tvs-mh img { border-radius: 2px; }
.tvs-mh b { font-size: 12px; }
.tvs-mh span { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--t-lav); color: var(--t-ink); font: 800 12px/1.3 Manrope, Arial, sans-serif; }
.tvs-mf { display: flex; gap: 8px; padding: 5px 12px; border-bottom: 1px solid var(--t-line); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvs-mf em { flex: none; width: 48px; color: var(--t-slate); }
.tvs-body { padding: 8px 12px 10px; font-size: 13px; line-height: 1.4; min-height: 46px; text-wrap: pretty; }

@container tv (max-width: 520px) {
  .tvs-page { grid-template-columns: minmax(0, 1fr); }
  .tvs-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(256px, 74%); }
  .tvs-prof { padding: 0 14px 12px; }
  .tvs-cover { margin: 0 -14px; height: 64px; }
  .tvs-cover-co { display: none; }
  .tvs-ava { left: 14px; top: 28px; width: 64px; height: 64px; font-size: 21px; }
  .tvs-mail { left: 10px; right: 10px; bottom: 10px; width: auto; }
  .tvs-page { grid-template-columns: minmax(0, 1fr); }
}

/* ================= MARKETING: Vidar visitors into Iriis bands, then Sync audience ================= */
.tvm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding: 0 52px 0 20px; border-bottom: 1px solid var(--t-line); }
.tvm-count { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t-slate); }
.tvm-n { position: relative; display: inline-grid; min-width: 26px; height: 32px; padding: 0 8px; place-items: center; border-radius: 10px; background: var(--t-ink); color: #fff; font: 700 17px/1 "Cabinet Grotesk", Cabinetgrotesk, Manrope, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.tvm-n i { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity .2s ease-out, transform .24s var(--t-ease); }
/* AK E9 (Oct 20): two accounts, so the marketing run has 8 steps: count = s6, Sync pressed = s7, Synced = s8 */
.tv:not(.s6) .tvm-n i[data-k="0"], .tv.s6 .tvm-n i[data-k="1"] { opacity: 1; transform: none; }
.tv.s6 .tvm-n { animation: tvPop .3s var(--t-ease); }
.tvm-body { position: absolute; top: 56px; left: 0; right: 0; bottom: 56px; display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
.tvm-lab { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font: 800 12px/1.2 Manrope, Arial, sans-serif; color: var(--t-slate); }
.tvm-feed { min-width: 0; padding: 14px 12px 12px 16px; background: var(--t-mist); border-right: 1px solid var(--t-line); }
.tvm-feed ol { list-style: none; padding: 0; display: grid; gap: 12px; }
.tvm-feed li { --from: translateY(-10px); position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 50px; padding: 6px 8px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(17,10,51,.08); }
.tvm-feed li > span { display: grid; min-width: 0; }
.tvm-feed li b { font-size: 13px; line-height: 1.25; }
.tvm-feed li em { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12px; color: var(--t-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvm-feed code { align-self: end; margin-bottom: 2px; padding: 1px 5px; border-radius: 6px; background: var(--t-lav); font: 600 12px/1.3 var(--t-mono); }
.tvm-feed .tvm-sc { --from: scale(.8); position: absolute; top: -6px; right: -4px; display: grid; place-items: center; min-width: 26px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--t-gold); font: 800 12px/1 Manrope, Arial, sans-serif; }
.tvm-bands { --from: translateX(16px); min-width: 0; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.tvm-band { flex: 1; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px; border-radius: 14px; background: var(--t-mist); }
.tvm-band.is-80 { background: var(--t-cream); }
.tvm-bh { display: grid; place-items: center; align-self: stretch; padding: 4px 2px; border-radius: 10px; background: #fff; text-align: center; }
.tvm-bh b { font: 700 17px/1.1 "Cabinet Grotesk", Cabinetgrotesk, Manrope, Arial, sans-serif; }
.tvm-bh span { font-size: 12px; line-height: 1.2; color: var(--t-slate); white-space: nowrap; }
.is-80 .tvm-bh { background: var(--t-gold); }
.is-80 .tvm-bh span, .is-73 .tvm-bh span { color: var(--t-ink); }
.is-73 .tvm-bh { background: var(--t-g3); }
.tvm-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.tvm-acc { --from: translateX(-14px) scale(.92); position: relative; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px 0 4px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(17,10,51,.12); font: 700 12px/1 Manrope, Arial, sans-serif; white-space: nowrap; }
.tvm-acc i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--t-lav); font: 800 12px/1 Manrope, Arial, sans-serif; letter-spacing: -.02em; }
.tvm-acc b { color: var(--t-slate); font-variant-numeric: tabular-nums; }
.tvm-acc.is-new { box-shadow: inset 0 0 0 1.5px var(--t-ink); }
.tvm-acc.is-new i { background: var(--t-ink); color: var(--t-gold); }
.tvm-acc.is-real { box-shadow: inset 0 0 0 1.5px var(--t-ink); background: var(--t-g3); }
.tvm-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 0 20px; border-top: 1px solid var(--t-line); }
.tvm-crm { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t-slate); }
.tvm-crm img { border-radius: 4px; }
.tvm-sync { position: relative; display: grid; height: 36px; }
.tvm-sync > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px; border-radius: 999px; font: 800 13px/1 Manrope, Arial, sans-serif; white-space: nowrap; transition: opacity .2s ease-out, transform .24s var(--t-ease); }
.tvm-sync svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tvm-s0 { background: var(--t-ink); color: #fff; }
.tvm-s1 { background: var(--t-gold); color: var(--t-ink); opacity: 0; transform: scale(.94); }
.tv.s7 .tvm-s0 { animation: tvPress .3s var(--t-ease); }
.tv.s8 .tvm-s0 { opacity: 0; }
.tv.s8 .tvm-s1 { opacity: 1; transform: none; }
.tv.is-out .tvm-s0 { opacity: 1; }
.tv.is-out .tvm-s1 { opacity: 0; transform: none; }

@container tv (max-width: 560px) {
  .tvm-feed code { display: none; }
  .tvm-bands { padding: 10px 12px 8px; gap: 6px; }
  .tvm-bands .tvm-lab { margin-bottom: 4px; }
  .tvm-band { grid-template-columns: 68px minmax(0, 1fr); padding: 5px; }
  .tvm-chips { gap: 4px; }
  .tvm-acc { height: 28px; padding-left: 9px; }
  .tvm-acc i { display: none; }
}
@container tv (max-width: 470px) {
  .tvm-head .tv-ttl span { display: none; }
  .tvm-head { height: 52px; padding-left: 14px; }
  .tvm-body { position: static; display: block; }
  .tvm-feed { border-right: 0; border-bottom: 1px solid var(--t-line); padding: 12px 14px; }
  .tvm-feed ol { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tvm-feed li { grid-template-columns: 28px minmax(0, 1fr); min-height: 46px; }
  .tvm-feed li em, .tvm-feed code { display: none; }
  .tvm-bands { padding: 12px 14px 72px; }
  .tvm-band { grid-template-columns: 68px minmax(0, 1fr); min-height: 48px; }
  .tvm-acc { padding-left: 4px; }
  .tvm-acc i { display: grid; }
  .tvm-foot { padding-left: 14px; padding-right: 12px; }
  .tv--mkt .tv-stage { position: relative; }
}
@container tv (max-width: 360px) {
  .tvm-crm span { display: none; }
  .tvm-sync > span { padding: 0 12px; }
}

/* ================= GTM ENGINEERING: a target-list sheet filling from API calls ================= */
.tvg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding: 0 52px 0 20px; }
.tvg-run { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--t-gold); font: 800 13px/1 Manrope, Arial, sans-serif; white-space: nowrap; }
.tvg-run svg { width: 12px; height: 12px; fill: currentColor; }
.tv.s1 .tvg-run { animation: tvPress .3s var(--t-ease); }
.tvg-grid { margin: 0 14px; border: 1px solid var(--t-line); border-radius: 14px; overflow: hidden; }
.tvg-row { --cols: minmax(0, 1.52fr) minmax(0, 1.06fr) minmax(0, .54fr) minmax(0, .84fr) minmax(0, 1.6fr);
  position: relative; display: grid; grid-template-columns: var(--cols); align-items: stretch; min-height: 60px; border-top: 1px solid var(--t-line); }
.tvg-row::before { content: ""; position: absolute; inset: 0; background: var(--t-cream); opacity: 0; pointer-events: none; transition: opacity .2s ease-out; }
.tv.s2:not(.s3) .tvg-row[data-r="2"]::before, .tv.s3:not(.s4) .tvg-row[data-r="3"]::before, .tv.s4:not(.s5) .tvg-row[data-r="4"]::before, .tv.s5:not(.s6) .tvg-row[data-r="5"]::before { opacity: 1; }
.tvg-row > * { position: relative; }
.tvg-row.is-h { min-height: 44px; border-top: 0; background: var(--t-mist); }
.tvg-c { position: relative; display: flex; align-items: center; min-width: 0; padding: 6px 7px; border-left: 1px solid var(--t-line); }
.tvg-c:first-child { border-left: 0; padding-left: 10px; }
.tvg-row.is-h .tvg-c { flex-direction: column; align-items: flex-start; justify-content: center; font: 800 12px/1.25 Manrope, Arial, sans-serif; }
.tvg-row.is-h .tvg-c b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tvg-row.is-h .tvg-c em { font-weight: 600; color: var(--t-slate); }
.tvg-who { gap: 8px; }
.tvg-who .tv-av { position: relative; }
.tvg-ok { --from: scale(.5); position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--t-ink); color: var(--t-gold); box-shadow: 0 0 0 2px #fff; }
.tvg-ok svg { width: 9px; height: 9px; }
.tvg-who > span { display: grid; min-width: 0; }
.tvg-who b { font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvg-who em { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12px; color: var(--t-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvg-c .d { --from: translateX(-8px); }
.tvg-c .tvg-ok { --from: scale(.5); }
.tvg-disc { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tvg-disc i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font: 700 14px/1 "Cabinet Grotesk", Cabinetgrotesk, Manrope, Arial, sans-serif; }
.tvg-disc i.is-D { background: var(--t-gold); }
.tvg-disc i.is-I { background: var(--t-g3); }
.tvg-disc i.is-S { background: var(--t-lav); }
.tvg-disc i.is-C { background: var(--t-ink); color: #fff; }
.tvg-disc em { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvg-band b { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 999px; font: 800 12px/1 Manrope, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.tvg-band.is-80 b { background: var(--t-gold); }
.tvg-band.is-73 b { background: var(--t-g3); }
.tvg-band.is-60 b { background: var(--t-cream); box-shadow: inset 0 0 0 1px rgba(17,10,51,.14); }
.tvg-sig { font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tvg-mail { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tvg-mail em { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvg-mail i { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--t-gold); color: var(--t-ink); }
.tvg-mail i svg { width: 10px; height: 10px; }
.tvg-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 0 14px; }
.tvg-left { position: relative; display: grid; align-items: center; min-width: 0; height: 32px; }
.tvg-left > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; transition: opacity .18s ease-out, transform .24s var(--t-ease); }
.tvg-mcp { font-size: 12px; color: var(--t-slate); }
.tvg-mcp code { padding: 3px 8px; border-radius: 6px; background: var(--t-lav); color: var(--t-ink); font: 600 12px/1.3 var(--t-mono); }
.tvg-call { justify-self: start; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--t-ink); color: #fff; opacity: 0; transform: translateY(6px); }
.tvg-call code { font: 600 12px/1 var(--t-mono); }
.tvg-call b { padding: 3px 5px; border-radius: 5px; background: var(--t-gold); color: var(--t-ink); font: 800 12px/1 var(--t-mono); }
.tvg-call em { font-size: 12px; color: var(--t-lav); }
.tvg-wb { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--t-ink); color: #fff; font: 800 12px/1 Manrope, Arial, sans-serif; white-space: nowrap; }
.tvg-wb > svg { width: 13px; height: 13px; color: var(--t-gold); }
.tvg-wb img { border-radius: 3px; background: #fff; }
.tvg-wbs { display: none; }

@container tv (max-width: 560px) {
  .tvg-head { padding-left: 14px; }
  .tvg-head .tv-ttl span { display: none; }
  .tvg-grid { margin: 0 10px; }
  .tvg-row { --cols: minmax(0, 1.45fr) minmax(0, 1.1fr) minmax(0, .62fr) minmax(0, 1.1fr); }
  .tvg-mailc, .tvg-row.is-h .tvg-c:last-child { display: none; }
  .tvg-foot { padding: 0 12px 0 10px; }
  .tvg-mcp > span, .tvg-call code { display: none; }
}
@container tv (max-width: 420px) {
  .tvg-row { --cols: minmax(0, 1.4fr) minmax(0, .66fr) minmax(0, 1.1fr); min-height: 56px; }
  .tvg-row > .tvg-c:nth-child(2) { display: none; }
  .tvg-who .tv-av { width: 26px; height: 26px; }
  .tvg-mcp { display: none !important; }
  .tvg-row.is-h .tvg-c b { white-space: normal; }
  .tvg-wb { padding: 0 12px; }
}
@container tv (max-width: 360px) {
  .tvg-wbl { display: none; }
  .tvg-wbs { display: inline; }
  .tvg-wb { padding: 0 10px; gap: 5px; }
}

/* ================= PRODUCT AND AI: an agent trace over MCP ================= */
.tv--ai { background: var(--t-ink); color: #fff; border-color: rgba(52,29,153,.35); }
@media (min-width: 768px) { .tv--ai { height: 452px; } }
.tv--ai .tv-pause { background: #fff; color: var(--t-ink); }
.tv--ai .tv-pause:focus-visible { outline-color: var(--t-gold); }
@media (hover: hover) and (pointer: fine) { .tv--ai .tv-pause:hover { background: var(--t-lav); } }
.tva-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 54px; padding: 0 52px 0 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.tva-head .tv-ttl span { color: rgba(255,255,255,.72); }
.tva-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--t-gold); }
.tva-ic svg { width: 18px; height: 18px; fill: none; stroke: var(--t-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tva-st { position: relative; flex: none; display: grid; }
.tva-st > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font: 800 12px/1 Manrope, Arial, sans-serif; white-space: nowrap; justify-self: end; transition: opacity .2s ease-out; }
.tva-st0 { background: rgba(255,255,255,.1); }
.tva-st1 { background: var(--t-gold); color: var(--t-ink); opacity: 0; }
.tva-st1 svg { width: 12px; height: 12px; }
.tv.s11 .tva-st0 { opacity: 0; }
.tv.s11 .tva-st1 { opacity: 1; }
.tv.is-out .tva-st0 { opacity: 1; }
.tv.is-out .tva-st1 { opacity: 0; }
.tva-trace { list-style: none; padding: 12px 18px; display: flex; flex-direction: column; gap: 10px; }
.tva-task { display: flex; gap: 10px; font-size: 13px; line-height: 1.4; }
.tva-task em, .tva-nh b { font: 800 12px/1.6 Manrope, Arial, sans-serif; color: var(--t-g3); }
.tva-task em { flex: none; }
.tva-call { display: grid; gap: 6px; }
.tva-cl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tva-tag { flex: none; padding: 3px 7px; border-radius: 6px; background: var(--t-lav); color: var(--t-ink); font: 800 12px/1.2 Manrope, Arial, sans-serif; }
.tva-cl code { min-width: 0; font: 600 13px/1.3 var(--t-mono); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tva-srv { font-size: 12px; color: rgba(255,255,255,.66); white-space: nowrap; }
.tva-ms { --from: none; margin-left: auto; flex: none; font: 700 12px/1 var(--t-mono); color: var(--t-gold); }
.tva-json { padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.07); font: 500 12px/1.55 var(--t-mono); color: rgba(255,255,255,.66); white-space: pre-wrap; overflow: hidden; }
.tva-jl { display: block; --from: translateX(-6px); }
.tva-json .k { color: var(--t-lav); }
.tva-json .v { color: var(--t-g3); }
.tva-jl.is-key { border-radius: 4px; transition-property: opacity, transform, background-color; }
.tv.s10 .tva-jl.is-key { background-color: rgba(255,198,30,.18); }
.tva-next { --from: translateY(12px); margin-top: 2px; padding: 12px 14px; border-radius: 14px; background: #fff; color: var(--t-ink); box-shadow: 0 2px 8px rgba(17,10,51,.08); }
.tva-nh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tva-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tva-task > span { min-width: 0; }
.tva-co { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; white-space: nowrap; vertical-align: middle; }
.tva-nh b { margin-right: auto; color: var(--t-ink); }
.tva-chip { --from: scale(.9); padding: 3px 9px; border-radius: 999px; background: var(--t-gold); font: 800 12px/1.3 Manrope, Arial, sans-serif; }
.tva-chip + .tva-chip { background: var(--t-lav); }
.tva-chip + .tva-chip + .tva-chip { background: var(--t-mist); box-shadow: inset 0 0 0 1px rgba(17,10,51,.12); }
.tva-sub { --from: translateY(6px); margin-top: 6px; font: 800 13px/1.35 Manrope, Arial, sans-serif; }
.tva-line { margin-top: 2px; font-size: 13px; line-height: 1.45; text-wrap: pretty; }

@container tv (max-width: 520px) {
  .tva-head { padding-left: 14px; }
  .tva-head .tv-ttl span { display: none; }
  .tva-trace { padding: 10px 12px; gap: 8px; }
  .tva-srv { display: none; }
  .tva-cl code { font-size: 12px; }
}
@container tv (max-width: 360px) {
  .tva-ic, .tva-t { display: none; }
  .tva-task { flex-direction: column; gap: 0; }
}

/* ---------- tablet and phones: the visual stacks under the words, at full width ---------- */
@media (max-width: 991px) {
  .miia-hero-right .hhv { max-width: 640px; margin: 0 auto; }
}
@media (max-width: 767px) {
  .tv { border-radius: 20px; }
  .tv-pause { top: 6px; right: 6px; width: 44px; height: 44px; }
  .tv-pause::before { inset: 0; }
  .tvs-bar { height: 56px; padding-right: 58px; }
  .tvs-page { top: 56px; }
  .tvm-head, .tvg-head, .tva-head { height: 56px; padding-right: 58px; }
  .tvm-body { top: 56px; }
  .tv--sales { height: 400px; }
  .tv--gtm { height: 400px; }
  .tv--ai { height: auto; min-height: 420px; }
  .tv--ai .tv-stage { position: relative; }
}
/* the marketing layout stacks (and the box grows with it) only when its container is 470px or less, which is a viewport of 520px or less (the visual is the viewport minus 48px, minus its 2px border) */
@media (max-width: 520px) {
  .tv--mkt { height: auto; min-height: 420px; }
}

/* reduced motion: the finished frame, nothing moves (the script also skips the loop and hides the pause button) */
@media (prefers-reduced-motion: reduce) {
  .tv .d { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tv *, .tv *::before, .tv *::after { animation: none !important; }
}

/* ================= Oct 20 wave 2 (Krish O20-064/066): the visual's own section under the proof band ================= */
/* "video above, animation below ... this will be a big deal because the animation is smaller": the visual is drawn on an 800 px canvas
   (every container query below sees 800, so the full desktop layout shows) and scaled up with CSS zoom on wide screens, so the text and
   the UI grow with it and stay sharp. Under 800 px it is fluid as before. One screen at 1280x720: heading + visual. */
.sl-show { padding: 56px 16px 64px; background: #F6F4FF; }
.sl-show__in { max-width: 1120px; margin: 0 auto; }
.sl-show .sl-h2 { max-width: 26ch; padding-bottom: 28px; text-wrap: balance; }
.sl-show .tv { max-width: 800px; margin: 0 auto; box-shadow: 0 32px 64px -24px rgba(17,10,51,.35); }
.sl-show__note { max-width: 800px; margin: 12px auto 0; text-align: right; font: 600 12px/1.4 Manrope, Arial, sans-serif; color: #5B6478; }
@media (min-width: 1000px) { .sl-show .tv { width: 800px; zoom: 1.12; } .sl-show__note { max-width: 896px; } }
@media (min-width: 1200px) { .sl-show .tv { zoom: 1.3; } .sl-show__note { max-width: 1040px; } .sl-show { padding-top: 48px; padding-bottom: 56px; } .sl-show .sl-h2 { padding-bottom: 24px; } }
@media (max-width: 767px) { .sl-show { padding: 40px 16px 48px; } .sl-show .sl-h2 { padding-bottom: 20px; } }

/* Product and AI on the wide canvas: LEFT the agent's calls, RIGHT the next step (hidden until the left has played) */
@container tv (min-width: 700px) {
  .tva-trace { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-rows: auto auto 1fr; column-gap: 16px; row-gap: 10px; align-content: start; }
  .tva-task { grid-column: 1 / -1; }
  .tva-call { grid-column: 1; }
  .tva-next { grid-column: 2; grid-row: 2 / span 2; align-self: start; margin-top: 0; padding: 16px; --from: translateX(16px); }
  .tva-line { font-size: 14px; line-height: 1.5; margin-top: 6px; }
}
/* the agent trace is as tall as its content in its own section (no empty ink band under it) */
.sl-show .tv--ai { height: auto; min-height: 0; }
.sl-show .tv--ai .tv-stage { position: relative; padding-bottom: 8px; }
.tv--ai .tv-co.is-real { background: var(--t-gold); color: var(--t-ink); }
/* real logo files (AK Oct 20 brand decision): a square mark sits on a white tile; a wordmark stands in for the name, never recoloured */
.tv-co.is-img { background: #fff; box-shadow: inset 0 0 0 1px rgba(17,10,51,.12); }
.tv-co.is-img img { width: 72%; height: 72%; object-fit: contain; }
.tv-wm { display: inline-block; flex: none; width: auto; max-width: 100%; vertical-align: middle; object-fit: contain; }
.tvm-acc .tv-wm { margin-left: 4px; }
.tvm-acc.is-real { background: #fff; box-shadow: inset 0 0 0 1.5px var(--t-ink); }
.tvm-acc.is-real .tv-co { width: 22px; height: 22px; border-radius: 50%; }
.tvm-feed li em .tv-wm, .tvg-who em .tv-wm { height: 10px; }
.tva-co .tv-co.is-img, .tvs-cover-co .tv-co.is-img { box-shadow: none; }
.tv--ai .tva-co { gap: 6px; }
@container tv (max-width: 560px) { .tvm-acc i.tv-co.is-img { display: grid; } }
.tvm-acc .tv-co.is-img { background: #fff; }
/* every band chip is a real brand now: white chip; the ones that just dropped in keep the ink ring (.is-new) */
.tvm-acc.is-real { background: #fff; box-shadow: inset 0 0 0 1px rgba(17,10,51,.14); }
.tvm-acc.is-real.is-new { box-shadow: inset 0 0 0 1.5px var(--t-ink); }
/* AK Oct 21: CRM icons spaced, never squeezed */
.tvm-crm img, .tvg-wb img { object-fit: contain; flex: none; }
.tvm-crm { gap: 8px; }

/* Nov 1 (Phase 1b): GTM Engineering block visuals.
   1. Intent is a bar in its band colour (gold = 80+, gold 300 = 73 to 79), never a raw score.
   2. The agent run keeps the draft's place with a quiet outline until the context lands (no empty half while the left side plays). */
.tvg-band { display: block; width: 100%; max-width: 72px; height: 8px; border-radius: 999px; background: var(--t-mist, #F6F4FF); box-shadow: inset 0 0 0 1px rgba(17,10,51,.1); overflow: hidden; }
.tvg-band > i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: inherit; background: var(--t-ink); }
.tvg-band.is-80 > i { background: var(--t-gold); }
.tvg-band.is-73 > i { background: var(--t-ink); }
.tva-ghost { display: none; }
@container tv (min-width: 700px) {
  .tva-ghost { grid-column: 2; grid-row: 2 / span 2; align-self: start; display: grid; gap: 10px; padding: 16px; border-radius: 14px; border: 1px dashed rgba(221,214,255,.35); color: rgba(255,255,255,.72); transition: opacity .24s var(--t-ease); }
  .tva-ghost b { font: 700 14px/1.3 Manrope, Arial, sans-serif; }
  .tva-ghost i { display: block; height: 8px; border-radius: 999px; background: rgba(221,214,255,.16); }
  .tva-ghost i:nth-of-type(2) { width: 82%; }
  .tva-ghost i:nth-of-type(3) { width: 64%; }
  .tva-ghost span { font: 600 12px/1.3 Manrope, Arial, sans-serif; color: rgba(221,214,255,.75); }
  .tv--ai.s7 .tva-ghost { opacity: 0; }
  .tva-next { position: relative; z-index: 1; }
}

/* Nov 2 (AK: no overlaps): the drafted email opens over the profile's lower half (bottom left), so the panel's "Open with" and
   "Avoid" stay readable beside it; on narrow cards it still spans the card bottom */
@container tv (min-width: 521px) { .tvs-mail { left: 14px; right: auto; bottom: 14px; width: min(380px, 52%); } }
/* Nov 2 fix: the step list stopped at s10, so step 11+ pieces (the Sales email body, the agent's last lines) never appeared */
.tv.s11 .d[data-s="11"], .tv.s12 .d[data-s="12"], .tv.s13 .d[data-s="13"], .tv.s14 .d[data-s="14"] { opacity: 1; transform: none; }

/* Nov 2 final review (backup: 04-build/backups/nov02-final/review2): Marketing "ABM audience" on narrow cards: 3 visitors sat
   2+1 (lone Emily Davis) and the first score pill sat on the "Visitor ID, on your site now" label. One column there. */
@container tv (max-width: 470px) { .tvm-feed ol { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

/* Nov 2 leftovers (GTM Engineering and Product and AI, narrow cards, 320 flagged): the agent card.
   - MCP tool names no longer end in an ellipsis: the line wraps and the name breaks after an underscore (<wbr> in the markup).
   - Below the two-column canvas the outlined "Next step" placeholder sits in the same slot as the Next step card, so the slot
     is never an empty dark block before the draft lands; the card replaces it (same cell, no jump). */
.tva-cl { flex-wrap: wrap; row-gap: 4px; }
.tva-cl code { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; flex: 1 1 9em; }
@container tv (max-width: 699px) {
  .tva-trace { display: grid; grid-template-columns: minmax(0, 1fr); }
  .tva-ghost { grid-area: 4 / 1; display: grid; align-content: center; gap: 10px; padding: 16px; border-radius: 14px; border: 1px dashed rgba(221,214,255,.35); color: rgba(255,255,255,.72); transition: opacity .24s var(--t-ease); }
  .tva-ghost b { font: 700 14px/1.3 Manrope, Arial, sans-serif; }
  .tva-ghost i { display: block; height: 8px; border-radius: 999px; background: rgba(221,214,255,.16); }
  .tva-ghost i:nth-of-type(2) { width: 82%; }
  .tva-ghost i:nth-of-type(3) { width: 64%; }
  .tva-ghost span { font: 600 12px/1.3 Manrope, Arial, sans-serif; color: rgba(221,214,255,.75); }
  .tv--ai.s7 .tva-ghost { opacity: 0; }
  .tva-next { grid-area: 4 / 1; position: relative; z-index: 1; }
}

/* Nov 2 late (AK: fewer words inside the visuals): the agent's draft on GTM Engineering is the email line and its three tags; the
   extra subject line above it goes. */
.tva-next .tva-sub { display: none; }
/* Nov 2 late (AK: nothing cut off): on phones the target list cut names ("Megan Cart...", "Michael Th...") and signals ("Opened a
   Denver..."); names now wrap onto two lines and a signal may take three. */
@container tv (max-width: 420px) {
  .tvg-who b { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; overflow-wrap: anywhere; }
  .tvg-sig { -webkit-line-clamp: 3; }
  .tvg-row { min-height: 64px; }
}