/* /miia hero v3 (product-animations-oct19): the real Agent Miia report tab bar, one tiny visual per tab. Markup:
   views/v2/product-miia/anim-miia.ejs (inside .hxh-box, public/v2/product-pages/hero-template.css). Script: anim/miia-tour.js.
   Brand only: ink #110A33, slate #5B6478, gold #FFC61E, gold300 #FFE8A5, lavender #DDD6FF (chips), mist #F6F4FF, violet #341D99,
   white. Cabinet Grotesk + Manrope. Motion: transform and opacity, 200-300 ms; parts stagger 50 ms. Reduced motion: still. */
.mt { --ink:#110A33; --slate:#5B6478; --gold:#FFC61E; --gold3:#FFE8A5; --lav:#DDD6FF; --mist:#F6F4FF; --line:#DDD6FF;
  --disp:Cabinetgrotesk, "Cabinet Grotesk", Manrope, Arial, sans-serif; --body:Manrope, Arial, sans-serif;
  --ease:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1);
  position:relative; align-self:stretch; justify-self:stretch; width:100%; min-width:0; margin:0; padding:14px 16px 14px; text-align:left; color:var(--ink);
  font:500 14px/1.4 var(--body); letter-spacing:normal; background:#fff; border:1px solid var(--lav); border-radius:16px; box-shadow:0 12px 32px -12px rgba(17,10,51,.22); }
.mt *, .mt *::before, .mt *::after { box-sizing:border-box; }
.mt p { margin:0; }
.mt em, .mt i { font-style:normal; }
.mt-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.mt-ui { display:flex; flex-direction:column; height:100%; }
.mt-i { width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mt-ln { display:block; width:var(--w); height:8px; border-radius:4px; background:var(--mist); box-shadow:inset 0 0 0 1px var(--lav); }

/* Report header (as in the app: logo, name, for seller, fit ring) */
.mt-head { display:flex; align-items:center; gap:12px; padding-right:44px; }
.mt-logo { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:10px; background:var(--mist); box-shadow:inset 0 0 0 1px var(--lav); }
.mt-logo svg { width:24px; height:24px; display:block; }
.mt-id { flex:1; min-width:0; display:grid; }
.mt-id b { font:700 18px/22px var(--disp); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mt-id span { font:500 12.5px/16px var(--body); color:var(--slate); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mt-fit { display:flex; align-items:center; gap:8px; flex:none; }
.mt-fitbar { position:relative; display:block; width:56px; height:8px; border-radius:4px; background:var(--lav); overflow:hidden; }
.mt-fitbar i { position:absolute; inset:0 auto 0 0; width:71%; border-radius:4px; background:var(--gold); transform-origin:0 50%; }
.mt-fitl { font:700 12.5px/16px var(--body); white-space:nowrap; }

/* The real tab bar: the strip pans, one gold underline slides */
.mt-bar { position:relative; margin-top:12px; overflow:hidden; box-shadow:inset 0 -1px 0 var(--line);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
.mt-strip { position:relative; display:flex; gap:4px; width:max-content; padding:0 12px; }
.mt.is-ready .mt-strip { transition:transform 300ms var(--ease); }
.mt-tab { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 8px; white-space:nowrap; font:600 13px/1 var(--body); color:var(--slate); transition:color 200ms ease; }
.mt-tab.is-on { color:var(--ink); font-weight:800; }
.mt-new { padding:2px 6px; border-radius:6px; background:var(--gold3); font:800 12px/1.2 var(--body); letter-spacing:.04em; color:var(--ink); }
.mt-cnt { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--ink); color:#fff; font:800 12px/1 var(--body); }
.mt-ink { position:absolute; left:0; bottom:0; width:100px; height:2px; border-radius:2px; background:var(--gold); transform-origin:0 50%; transform:translateX(20px) scaleX(.8); }
.mt.is-ready .mt-ink { transition:transform 240ms var(--ease); }

/* Panels: all in one box (no height change); the active one fades in and rises, its parts stagger.
   Oct 26 PM (AS-B, audit Miia 1): the old panel and the new one now cross-fade at the same time (no delay on the incoming panel) and the
   parts of an inactive panel rest at .3 opacity, not 0, so no frame between two tabs is ever empty. Parts still stagger, 40 ms apart. */
.mt-stage { position:relative; flex:1; min-height:148px; margin-top:12px; }
.mt-p { position:absolute; inset:0; display:flex; flex-direction:column; gap:8px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity 240ms ease, transform 240ms var(--ease), visibility 0s linear 240ms; }
.mt-p.is-on { opacity:1; visibility:visible; transform:none; transition:opacity 240ms ease, transform 260ms var(--ease), visibility 0s; }
.mt-p [style*="--k"] { transition:opacity 220ms ease calc(var(--k) * 40ms), transform 260ms var(--ease) calc(var(--k) * 40ms); }
.mt-p:not(.is-on) [style*="--k"] { opacity:.55; transform:translateY(6px) scale(.98); transition-duration:0s; transition-delay:260ms; }

/* Infographic: a one-page visual */
.mt-page { flex:1; display:flex; flex-direction:column; gap:7px; padding:10px 12px; border-radius:12px; box-shadow:inset 0 0 0 1px var(--lav); }
.mt-lbl { display:inline-block; padding:0 8px; border-radius:6px; background:var(--gold3); font:800 12px/18px var(--body); letter-spacing:.04em; text-transform:uppercase; }
.mt-title { font:700 18px/20px var(--disp); letter-spacing:-.01em; }
.mt-facts { display:flex; flex-wrap:wrap; gap:6px; }
.mt-facts em { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:999px; background:var(--mist); font:700 12px/16px var(--body); white-space:nowrap; }
.mt-facts .mt-i { color:var(--slate); width:12px; height:12px; }
.mt-cols { flex:1; display:grid; grid-template-columns:1.4fr 1fr; gap:10px; min-height:0; }
.mt-blk { display:grid; align-content:center; gap:6px; min-width:0; }
.mt-note { display:flex; align-items:center; gap:6px; font:700 12px/16px var(--body); }
.mt-note .mt-i { width:12px; height:12px; color:var(--slate); }
.mt-blk--bars { display:flex; flex-direction:column; gap:3px; height:100%; min-height:28px; }
.mt-barsrow { flex:1; display:flex; align-items:flex-end; gap:5px; min-height:0; }
.mt-barsrow i { flex:1; height:var(--h); border-radius:3px 3px 1px 1px; background:var(--lav); }
.mt-barsrow i:nth-child(4) { background:var(--gold); }
.mt-barlbl { display:flex; gap:5px; }
.mt-barlbl em { flex:1; text-align:center; font:700 12px/14px var(--body); color:var(--slate); }

/* Synopsis: three short bars */
.mt-p--syn { justify-content:center; gap:10px; }
.mt-tldr { align-self:flex-start; padding:3px 10px; border-radius:999px; background:var(--ink); color:#fff; font:800 12px/16px var(--body); letter-spacing:.04em; }
.mt-sbar { display:grid; grid-template-columns:58px minmax(0, 1fr); align-items:center; gap:10px; }
.mt-sbar em { justify-self:start; padding:2px 8px; border-radius:999px; background:var(--lav); font:800 12px/16px var(--body); }
.mt-sbar i { justify-self:start; max-width:100%; padding:3px 12px; border-radius:999px; background:var(--ink); color:#fff; font:700 12px/18px var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mt-sbar:first-of-type i { background:var(--gold); color:var(--ink); }
.mt-sbar:last-of-type i { background:var(--lav); color:var(--ink); }

/* Executive Summary: a heading plus lines with citations */
.mt-p--exec { justify-content:center; gap:10px; }
.mt-h1 { display:flex; align-items:center; gap:8px; font:700 16px/20px var(--disp); }
.mt-h1 span { display:grid; place-items:center; width:22px; height:22px; border-radius:7px; background:var(--gold); font:800 12px/1 var(--body); }
.mt-el { display:flex; align-items:center; gap:6px; padding-left:30px; }
.mt-el span { min-width:0; font:600 12px/16px var(--body); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mt-el sup { display:grid; place-items:center; flex:none; width:16px; height:16px; border-radius:50%; background:var(--mist); box-shadow:inset 0 0 0 1px var(--lav); font:800 12px/1 var(--body); vertical-align:baseline; position:static; top:0; }

/* Stakeholders: avatars with role chips */
.mt-p--stake { flex-direction:row; align-items:center; justify-content:space-around; gap:8px; }
.mt-person { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
.mt-pn { font:700 14px/18px var(--disp); }
.mt-av { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; font:800 15px/1 var(--body); }
.mt-av--eb { background:var(--gold); }
.mt-av--ch { background:var(--lav); }
.mt-av--tb { background:var(--mist); box-shadow:inset 0 0 0 1px var(--lav); }
.mt-role { padding:3px 9px; border-radius:999px; font:800 12px/16px var(--body); text-align:center; white-space:nowrap; }
.mt-role--eb { background:var(--gold3); }
.mt-role--ch { background:var(--lav); }
.mt-role--tb { background:var(--mist); box-shadow:inset 0 0 0 1px var(--lav); }

/* Tech Stack (the app's view): grouped rows, a small uppercase group label, tool chips with a tiny brand-colour mark + name, a gold dot on
   recently detected tools. Chips appear row by row (60 ms stagger). The panel is a size container: trailing chips drop out when narrow. */
.mt-p--tech { justify-content:center; gap:7px; container-type:inline-size; }
.mt-grp { display:grid; gap:3px; min-width:0; }
.mt-gl { display:flex; align-items:center; justify-content:space-between; gap:8px; height:16px; }
.mt-gl > span { font:800 12px/16px var(--body); letter-spacing:.06em; text-transform:uppercase; color:var(--slate); white-space:nowrap; }
.mt-tcount { padding:0 8px; border-radius:999px; background:var(--lav); font:700 12px/16px var(--body); color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
.mt-tcount b { font-weight:800; }
.mt .mt-chips { display:flex; flex-wrap:nowrap; gap:5px; min-width:0; overflow:hidden; padding:4px 4px 2px 0; margin:-4px -4px -2px 0; }
.mt-tool { position:relative; display:inline-flex; align-items:center; flex:none; gap:6px; height:24px; padding:0 8px 0 3px; border-radius:8px; background:#fff; box-shadow:inset 0 0 0 1px var(--lav); font:700 12px/16px var(--body); color:var(--ink); white-space:nowrap; }
.mt-mk { display:grid; place-items:center; flex:none; width:18px; height:18px; border-radius:6px; font:800 12px/1 var(--body); }
.mt-mk--ink { background:var(--ink); color:#fff; }
.mt-mk--gold { background:var(--gold); color:var(--ink); }
.mt-mk--gold3 { background:var(--gold3); color:var(--ink); }
.mt-mk--lav { background:var(--lav); color:var(--ink); }
.mt-mk--violet { background:#341D99; color:#fff; }
.mt-mk--slate { background:var(--slate); color:#fff; }
.mt-nw { position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 2px #fff; }
.mt-p--tech [style*="--k"] { transition-delay:calc(var(--k) * 30ms); }
.mt-p--tech:not(.is-on) [style*="--k"] { transition-delay:260ms; }
@container (max-width:489px) { .mt-chips .mt-tool:nth-child(6) { display:none; } }
@container (max-width:459px) { .mt-chips .mt-tool:nth-child(5) { display:none; } }
@container (max-width:389px) { .mt-chips .mt-tool:nth-child(4) { display:none; } }
@container (max-width:289px) { .mt-chips .mt-tool:nth-child(3) { display:none; } }

/* Job Postings: a list with a hiring-up arrow */
.mt-p--jobs { flex-direction:row; align-items:center; gap:14px; }
.mt-jl { flex:1; display:grid; gap:8px; min-width:0; }
.mt-job { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:10px; background:var(--mist); }
.mt-jd { display:grid; place-items:center; flex:none; width:22px; height:22px; border-radius:7px; background:#fff; box-shadow:inset 0 0 0 1px var(--lav); color:var(--slate); }
.mt-jd .mt-i { width:12px; height:12px; }
.mt-job b, .mt-sg b { min-width:0; font:700 13.5px/18px var(--disp); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mt-job em { margin-left:auto; padding:1px 8px; border-radius:999px; background:var(--lav); font:800 12px/16px var(--body); }
.mt-hire { flex:none; display:grid; justify-items:center; gap:2px; width:92px; padding:10px 8px; border-radius:14px; background:var(--ink); color:#fff; }
.mt-uparr { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--gold); color:var(--ink); }
.mt-uparr .mt-i { width:16px; height:16px; stroke-width:2.6; }
.mt-hire b { font:700 26px/28px var(--disp); font-variant-numeric:tabular-nums; }
.mt-hire > span:last-child { font:700 12px/14px var(--body); color:var(--lav); text-align:center; }
.mt-p--jobs.is-on .mt-uparr { animation:mt-rise 900ms var(--ease) 200ms both; }
@keyframes mt-rise { 0% { transform:translateY(8px); opacity:0; } 60% { transform:translateY(-3px); opacity:1; } 100% { transform:none; } }

/* Intent Data: the score bands 60-72 / 73-79 / 80+ */
.mt-p--intent { justify-content:center; gap:10px; }
.mt-topic { display:grid; gap:5px; }
.mt-tt { display:flex; align-items:center; gap:8px; }
.mt-tt b { font:700 14px/18px var(--disp); }
.mt-sc { padding:1px 8px; border-radius:999px; background:var(--mist); box-shadow:inset 0 0 0 1px var(--lav); font:800 12px/16px var(--body); font-variant-numeric:tabular-nums; }
.mt-sc.is-hi { background:var(--gold); box-shadow:none; }
.mt-band { position:relative; display:flex; gap:2px; height:20px; }
.mt-band i { display:flex; align-items:center; height:100%; padding-left:8px; border-radius:5px; font:700 12px/1 var(--body); color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; }
.mt-band .s1 { flex:13; background:var(--lav); }
.mt-band .s2 { flex:7; background:var(--gold3); }
.mt-band .s3 { flex:10; background:var(--gold); }
.mt-pin { position:absolute; left:0; right:0; top:-3px; bottom:-3px; transform:translateX(var(--x)); transition:transform 520ms var(--ease) 200ms; }
.mt-pin::after { content:""; position:absolute; right:-2px; top:0; bottom:0; width:4px; border-radius:2px; background:var(--ink); box-shadow:0 0 0 1.5px #fff; }
.mt-p:not(.is-on) .mt-pin { transform:translateX(-100%); transition:none; }

/* Intent labels under the bands on phones (the pin would cross them) */
.mt-bl { display:none; }

/* Full Report: a stack of pages */
.mt-p--full { flex-direction:row; align-items:center; justify-content:center; gap:28px; }
.mt-pages { position:relative; width:116px; height:132px; }
.mt-pg { position:absolute; inset:0; display:grid; align-content:start; gap:8px; padding:14px 12px; border-radius:10px; background:#fff; box-shadow:inset 0 0 0 1px var(--lav), 0 2px 8px rgba(17,10,51,.08); transition:transform 320ms var(--ease) 120ms; }
.mt-pg--1 { align-content:start; gap:5px; padding:10px 10px 8px; }
.mt-pgl { justify-self:start; padding:0 8px; border-radius:6px; background:var(--gold3); font:800 12px/18px var(--body); letter-spacing:.04em; text-transform:uppercase; margin-bottom:3px; }
.mt-pg--1 > span { display:flex; align-items:center; gap:5px; font:700 12px/16px var(--body); white-space:nowrap; }
.mt-pg--1 > span b { display:grid; place-items:center; flex:none; width:16px; height:16px; border-radius:5px; background:var(--lav); font:800 12px/1 var(--body); }
.mt-pg--2 { background:var(--mist); }
.mt-pg--3 { background:var(--lav); }
.mt-p--full.is-on .mt-pg--2 { transform:translate(-14px, 4px) rotate(-6deg); }
.mt-p--full.is-on .mt-pg--3 { transform:translate(-26px, 8px) rotate(-12deg); }
.mt-fs { display:grid; grid-template-columns:auto auto; align-items:baseline; gap:2px 8px; font:600 12.5px/16px var(--body); color:var(--slate); }
.mt-fs b { font:700 26px/28px var(--disp); color:var(--ink); font-variant-numeric:tabular-nums; }

/* Signals: a feed with news and intent tags */
.mt-p--sig { justify-content:center; gap:10px; }
.mt-sg { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; box-shadow:inset 0 0 0 1px var(--lav); }
.mt-sg:first-child { box-shadow:inset 0 0 0 1.5px var(--gold), 0 2px 8px rgba(17,10,51,.08); }
.mt-sgi { display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:9px; background:var(--ink); color:var(--gold); }
.mt-sgi--gold { background:var(--gold); color:var(--ink); }
.mt-sgi .mt-i { width:16px; height:16px; }
.mt-tag { margin-left:auto; padding:2px 9px; border-radius:999px; background:var(--lav); font:800 12px/16px var(--body); white-space:nowrap; }
.mt-tag--gold { background:var(--gold3); }

/* Pause / play (WCAG 2.2.2), top right of the card, beside the fit ring */
.mt-ctl { position:absolute; top:14px; right:14px; display:grid; place-items:center; width:36px; height:36px; padding:0; border-radius:50%; border:1px solid var(--lav); background:#fff; cursor:pointer; transition:transform 160ms var(--ease), background-color 160ms ease; }
.mt-ctl::after { content:""; position:absolute; inset:-4px; }
@media (hover:hover) and (pointer:fine) { .mt-ctl:hover { background:var(--mist); } }
.mt-ctl:active { transform:scale(.96); }
.mt-ctl:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.mt-ctl[hidden] { display:none; }
.mt-ctl svg { width:16px; height:16px; fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:round; }
.mt-ctl .i-play { display:none; fill:var(--ink); stroke:none; }
.mt-ctl[aria-pressed="true"] .i-pause { display:none; }
.mt-ctl[aria-pressed="true"] .i-play { display:block; }

/* Tablet and phone: the box is no longer a fixed ratio, so the card sets its own height */
@media (max-width:991px) { .mt { min-height:280px; } }
@media (max-width:767px) {
  .mt { padding:12px; min-height:268px; }
  .mt-fitl { display:none; }
  .mt-id b { font-size:16px; line-height:20px; }
  .mt-id span { font-size:12px; }
  .mt-ctl { top:12px; right:10px; }
  .mt-head { padding-right:40px; gap:10px; }
  .mt-logo { width:32px; height:32px; }
  .mt-tab { font-size:12.5px; padding:0 6px; }
  .mt-stage { min-height:176px; }
  .mt-facts em:nth-child(4) { display:none; }
  .mt-role { font-size:12px; padding:2px 7px; white-space:normal; max-width:96px; }
  .mt-av { width:46px; height:46px; }
  .mt-band { height:10px; }
  .mt-band i { padding:0; color:transparent; }
  .mt-bl { display:grid; grid-template-columns:13fr 7fr 10fr; gap:2px; font:700 12px/14px var(--body); color:var(--slate); font-variant-numeric:tabular-nums; }
  .mt-p--full { gap:16px; }
  .mt-pages { margin-left:20px; }
  .mt-role { max-width:80px; }
  .mt-hire { width:80px; }
  .mt-tag { font-size:12px; padding:2px 7px; }
}
@media (max-width:359px) {
  .mt-sgi { display:none; }
  .mt-role { max-width:72px; padding:2px 6px; }
  .mt-pages { width:104px; }
  .mt-fitbar { width:40px; }
  .mt-job em { display:none; }
  .mt-cols { grid-template-columns:1fr; }
  .mt-blk--bars { display:none; }
  .mt-tcount { padding:0 6px; }
}
@media (prefers-reduced-motion:reduce) {
  .mt *, .mt { transition:none !important; animation:none !important; }
  /* No tour under reduced motion: all nine tabs show, wrapped onto as many rows as they need (none cut off), and the Infographic is still. */
  .mt-bar { overflow:visible; -webkit-mask-image:none; mask-image:none; }
  .mt-strip { width:auto; flex-wrap:wrap; row-gap:0; padding:0; }
  .mt-tab { height:24px; padding:0 8px; }
  .mt-tab.is-on { box-shadow:inset 0 -2px 0 var(--gold); }
  .mt-ink { display:none; }
}

/* Oct 20 (Krish O20-013 + AK's one-area-at-a-time rule; plan item 3). Real-brand account (was Dell Technologies; now Walmart with its real logo, see the W2 anims B block at the end): a plain lettermark in
   the logo slot (no outside logo file) and a "Sample data" caption under the card, in the box's padding (12px, slate). */
.mt-logo--lt { background:var(--ink); box-shadow:none; color:#fff; font:700 18px/1 var(--disp); }
.mt-note-cap { position:absolute; right:2px; bottom:-21px; margin:0; font:600 12px/16px var(--body); color:var(--slate); pointer-events:none; }
/* One area moves at a time, but never an empty frame (Oct 26 PM, AS-B, audit Miia 1: the old timing faded the old panel out in 140 ms, waited
   until 440 ms, then built the new one part by part from opacity 0, so the card body was blank for about 400 ms every 2.2 s). Now: the tab
   bar moves first (strip pan + gold underline, from 0), the old panel fades out (200 ms) while the new one fades in (from 60 ms), the parts
   of the new panel rest at .3 opacity and brighten one after another (from 200 ms, 80 ms apart). Tech Stack brings its three rows in one at a
   time; the two Intent pins slide one after the other. miia-tour.js steps every 2.2 s. */
.mt-p { filter:blur(2px); transition:opacity 180ms ease, transform 200ms var(--ease), filter 180ms ease, visibility 0s linear 200ms; } /* the leaving panel softens as it fades, so the two never read as one jumble */
.mt-p.is-on { filter:none; transition:opacity 220ms ease, transform 260ms var(--ease), filter 180ms ease, visibility 0s; }
.mt.is-ready .mt-strip { transition:transform 300ms var(--ease); }
.mt.is-ready .mt-ink { transition:transform 260ms var(--ease); }
.mt-p [style*="--k"] { transition:opacity 220ms ease calc(200ms + var(--k) * 80ms), transform 240ms var(--ease) calc(200ms + var(--k) * 80ms); }
.mt-p:not(.is-on) [style*="--k"] { transition-duration:0s; transition-delay:200ms; }
.mt-p--tech .mt-grp:nth-child(1) [style*="--k"] { transition-delay:200ms; }
.mt-p--tech .mt-grp:nth-child(2) [style*="--k"] { transition-delay:360ms; }
.mt-p--tech .mt-grp:nth-child(3) [style*="--k"] { transition-delay:520ms; }
.mt-p--tech:not(.is-on) [style*="--k"] { transition-delay:200ms; }
.mt-p--intent .mt-topic:nth-child(1) .mt-pin { transition-delay:300ms; }
.mt-p--intent .mt-topic:nth-child(2) .mt-pin { transition-delay:700ms; }
.mt-pg { transition:transform 320ms var(--ease) 300ms; }
.mt-p--jobs.is-on .mt-uparr { animation-delay:400ms; }
@media (min-width:992px) { .mt-note-cap { top:-20px; bottom:auto; } } /* desktop: the card fills the box's lower padding, so the caption sits in the top padding, right corner */
@media (max-width:767px) { .mt-note-cap { bottom:-25px; } }
@media (prefers-reduced-motion:reduce) { .mt *, .mt { transition:none !important; animation:none !important; } }

/* Oct 20 W2 anims B: real brands (Walmart account, Snowflake seller; 03-reference/demo-brands-decision-oct20.md). The account logo is
   the real Walmart mark (no letter tile), the seller line carries Snowflake's mark, stakeholders are illustrated avatars
   (views/v2/product-miia/avatar.ejs), and the Tech Stack chips show tool names only (no letter tiles). */
.mt-logo { background:#fff; }
.mt-logo img { display:block; width:24px; height:24px; }
.mt-sel { display:inline-block; width:13px; height:13px; margin:0 4px 0 2px; vertical-align:-2px; }
.mt-av { background:none !important; box-shadow:none !important; overflow:hidden; }
.mt-av .hx-av { display:block; width:100%; height:100%; }
.mt-tool { padding:0 9px; }
/* phones: the seller stays visible ("for Snowflake"); the "Account Intelligence ·" lead-in drops instead of being cut */
@media (max-width:767px) { .mt-ai { display:none; } }

/* Oct 20 product accuracy (AK): Apollo contact details on the stakeholder cards. Masked email and phone per person, then one "via Apollo" tag
   with the real Apollo mark. Everything staggers in with the panel (--k); phones show icons only (the tag carries the words). */
.mt-p--stake { flex-direction:column; justify-content:center; align-items:stretch; gap:12px; }
.mt-people { display:flex; align-items:flex-start; justify-content:space-around; gap:8px; }
.mt-person { gap:4px; }
.mt-cts { display:grid; gap:2px; justify-items:center; margin-top:2px; }
.mt-ct { display:inline-flex; align-items:center; gap:4px; font:600 12px/16px var(--body); color:var(--slate); white-space:nowrap; }
.mt-ct .mt-i { width:12px; height:12px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mt-via { align-self:center; display:inline-flex; align-items:center; gap:6px; padding:3px 12px 3px 8px; border-radius:999px; background:var(--lav); font:700 12px/16px var(--body); color:var(--ink); white-space:nowrap; }
.mt-via img { width:14px; height:14px; flex:none; }
.mt-via b { font-weight:800; }
.mt-via span { color:var(--ink); font-weight:600; }
@media (max-width:767px) {
  .mt-cts { display:flex; gap:8px; }
  .mt-ctt { display:none; }
  .mt-via span { display:none; }
  .mt-p--stake { gap:8px; }
}
@media (max-width:359px) { .mt-person { gap:3px; } }

/* Oct 20 night (AK: "Stakeholders breaking"): on desktop the panel is 148px tall but the cards plus the "via Apollo" tag needed ~170px,
   so avatars pressed into the tab bar and the tag fell below the card. Tighter cards fit everything inside the stage. */
@media (min-width:768px) {
  .mt-p--stake { gap:8px; justify-content:flex-start; padding-top:2px; }
  .mt-p--stake .mt-av { width:40px; height:40px; font-size:13px; }
  .mt-p--stake .mt-person { gap:3px; }
  .mt-p--stake .mt-pn { line-height:17px; }
  .mt-p--stake .mt-role { padding:2px 8px; }
  .mt-p--stake .mt-cts { margin-top:0; gap:1px; }
  .mt-p--stake .mt-via { padding:2px 10px 2px 8px; }
}
/* Phones: a signal title wraps to two lines instead of being cut off with an ellipsis. */
@media (max-width:767px) { .mt-sg b { white-space:normal; overflow:visible; text-overflow:clip; } }

/* Phones: the Account snapshot page is 185px tall, so the stage gets 10px more room (was 176). */
@media (max-width:767px) { .mt-stage { min-height:186px; } }

/* Nov 5 hero fix: in Amar's narrower desktop hero column (Nov 4, words 1.2 : visual .8) the report card is ~360px wide, so the three
   masked emails (about 120px each) ran into each other. When the card is that narrow the contact row shows its icons only, as on
   phones; the "via Apollo, verified email and phone" tag still says what is there. */
.mt-ui { container: mt / inline-size; }
@container mt (max-width: 420px) {
  .mt-cts { display: flex; gap: 8px; }
  .mt-ctt { display: none; }
}

/* Nov 5 hero restore: between 900 and 1199px wide the card is only 270 to 330px (Amar's 1.2 : .8 split stays there), and at that
   width the "Moderate fit" label and the "Account Intelligence ·" prefix squeezed the account name ("Walmart") out of the header
   entirely. When the card is that narrow the header keeps the name, "for Snowflake" and the fit bar, as on phones. */
@container mt (max-width: 340px) {
  .mt-fitl, .mt-ai { display: none; }
}