/* ══════════════════════════════════════════════════════════════════════════
   XLNC.AI — THEME VIDEO styles.  Pair with theme-video.js.
   Palette tokens (--pine, --brass, --plaster …) come from sample.html :root.
   ══════════════════════════════════════════════════════════════════════════ */
/* Acts: Data → AI System → Analysis → Business Solution → Revenue */
.tv{
  position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/8;
  background:radial-gradient(120% 90% at 50% 8%,#20242A 0%,#15171A 55%,#101215 100%);
  border:1px solid rgba(255,255,255,.09);
  font-family:'DM Mono',monospace;color:#fff;user-select:none;
  container-type:inline-size;
}
.tv-grid{
  position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(80% 70% at 50% 50%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 50%,#000 30%,transparent 100%);
}
.tv-vig{position:absolute;inset:0;pointer-events:none;z-index:6;
  background:radial-gradient(100% 80% at 50% 45%,transparent 55%,rgba(10,11,13,.72) 100%);}
.tv-stage{position:absolute;inset:0;z-index:2;}

/* — acts — */
.tv .act{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .3s var(--ease);}
.tv .act.on{opacity:1;visibility:visible;}
.tv .cap{
  position:absolute;left:clamp(18px,3.4cqw,40px);top:clamp(18px,3.6cqw,40px);z-index:5;
}
.tv .cap i{
  display:block;font-style:normal;font-size:clamp(9px,1cqw,11.5px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--brass-lt);margin-bottom:9px;
}
.tv .cap b{
  display:block;font-family:'Syne',sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(19px,2.9cqw,38px);line-height:1.05;max-width:15ch;
}
.tv .cap p{font-size:clamp(10px,1.05cqw,13px);letter-spacing:.04em;color:rgba(255,255,255,.55);margin-top:10px;max-width:34ch;line-height:1.6;}
.tv .act.on .cap i{animation:tvUp .5s var(--ease) both;}
.tv .act.on .cap b{animation:tvUp .55s .05s var(--ease) both;}
.tv .act.on .cap p{animation:tvUp .55s .1s var(--ease) both;}
@keyframes tvUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes tvIn{from{opacity:0;transform:scale(.86);}to{opacity:1;transform:scale(1);}}

/* ACT 1 — DATA */
.tv-src{position:absolute;right:clamp(18px,3.4cqw,42px);top:50%;transform:translateY(-50%);z-index:4;display:grid;gap:clamp(6px,.9cqw,11px);}
.tv-src span{
  display:flex;align-items:center;gap:9px;justify-content:flex-end;
  font-size:clamp(9px,.95cqw,12px);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.14);border-radius:3px;padding:clamp(5px,.7cqw,9px) clamp(9px,1.1cqw,14px);
  background:rgba(255,255,255,.035);
}
.tv-src span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--pine-lt);box-shadow:0 0 10px var(--pine-lt);}
.tv .act.on .tv-src span{animation:tvUp .45s var(--ease) both;}
.tv .act.on .tv-src span:nth-child(2){animation-delay:.06s;}
.tv .act.on .tv-src span:nth-child(3){animation-delay:.12s;}
.tv .act.on .tv-src span:nth-child(4){animation-delay:.18s;}
.tv .act.on .tv-src span:nth-child(5){animation-delay:.24s;}
.tv-flow{position:absolute;inset:0;z-index:3;}
.tv-flow b{
  position:absolute;right:6%;font-weight:400;font-size:clamp(8px,.85cqw,10.5px);letter-spacing:.1em;
  color:var(--plaster);background:rgba(201,118,47,.16);border:1px solid rgba(224,154,78,.5);
  border-radius:2px;padding:3px 8px;white-space:nowrap;opacity:0;
}
.tv .act.on .tv-flow b{animation:tvPkt 1.45s linear infinite;}
@keyframes tvPkt{
  0%{opacity:0;transform:translateX(0) scale(.9);}
  12%{opacity:1;}
  78%{opacity:1;}
  100%{opacity:0;transform:translateX(-78cqw) scale(.72);}
}

/* ACT 2 — AI CORE */
.tv-core{position:absolute;left:50%;top:52%;translate:-50% -50%;width:clamp(120px,20cqw,240px);aspect-ratio:1;z-index:4;}
.tv-hex{
  position:absolute;inset:14%;
  display:flex;align-items:center;justify-content:center;
}
.tv-hex span{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(11px,1.5cqw,19px);letter-spacing:.06em;color:#fff;}
.tv-ring{position:absolute;inset:0;border:1px solid rgba(224,154,78,.34);border-radius:50%;}
.tv-ring.r2{inset:-12%;border-style:dashed;border-color:rgba(46,122,101,.5);}
.tv-ring.r3{inset:-26%;border-color:rgba(255,255,255,.1);}
.tv .act.on .tv-hex{animation:tvIn .8s var(--spring) both;}
.tv .act.on .tv-ring{animation:tvIn .9s .1s var(--ease) both,tvSpin 10s linear infinite;}
.tv .act.on .tv-ring.r2{animation:tvIn .9s .2s var(--ease) both,tvSpin 6.5s linear infinite reverse;}
.tv .act.on .tv-ring.r3{animation:tvIn .9s .3s var(--ease) both,tvSpin 15s linear infinite;}
@keyframes tvSpin{to{transform:rotate(360deg);}}
.tv-feed{position:absolute;inset:0;z-index:3;}
.tv-feed i{
  position:absolute;left:50%;top:52%;width:clamp(90px,17cqw,190px);height:1px;transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(224,154,78,0),rgba(224,154,78,.85));opacity:0;
}
.tv .act.on .tv-feed i{animation:tvFeed 1.1s ease-in infinite;}
@keyframes tvFeed{0%{opacity:0;scale:1.9 1;}35%{opacity:1;}100%{opacity:0;scale:.06 1;}}

/* ACT 3 — ANALYSIS */
.tv-net{position:absolute;right:5%;top:50%;translate:0 -50%;width:min(46cqw,520px);aspect-ratio:1.5;z-index:3;}
.tv-net svg{width:100%;height:100%;overflow:visible;}
.tv-net .ln{stroke:rgba(46,122,101,.55);stroke-width:1;fill:none;stroke-dasharray:180;stroke-dashoffset:180;}
.tv .act.on .tv-net .ln{animation:tvDraw .75s var(--ease) forwards;}
.tv .act.on .tv-net .ln:nth-of-type(2n){animation-delay:.15s;}
.tv .act.on .tv-net .ln:nth-of-type(3n){animation-delay:.3s;}
@keyframes tvDraw{to{stroke-dashoffset:0;}}
.tv-net .nd{fill:var(--brass-lt);opacity:0;}
.tv .act.on .tv-net .nd{animation:tvNode .5s var(--spring) forwards,tvBlink 2.2s 1s ease-in-out infinite;}
.tv .act.on .tv-net .nd:nth-of-type(2n){animation-delay:.2s,1.2s;}
.tv .act.on .tv-net .nd:nth-of-type(3n){animation-delay:.4s,1.4s;}
@keyframes tvNode{from{opacity:0;r:1;}to{opacity:1;}}
@keyframes tvBlink{0%,100%{opacity:1;}50%{opacity:.35;}}
.tv-scan{position:absolute;inset:0;overflow:hidden;border-radius:inherit;}
.tv-scan::before{
  content:"";position:absolute;top:0;bottom:0;width:130px;
  background:linear-gradient(90deg,transparent,rgba(46,122,101,.28),rgba(224,154,78,.22),transparent);
}
.tv .act.on .tv-scan::before{animation:tvScan 1.9s var(--ease) infinite;}
@keyframes tvScan{0%{transform:translateX(-140px);}100%{transform:translateX(100cqw);}}
/* act 3 — cluster bars (fills the mid-left gap between caption and readouts) */
.tv-clus{
  position:absolute;left:clamp(18px,3.4cqw,40px);top:clamp(104px,15cqw,190px);z-index:5;
  width:min(38cqw,360px);display:grid;gap:clamp(5px,.7cqw,9px);
}
@container (max-width:640px){
  /* the node graph owns the right half on small cards, so narrow the bars
     instead of letting the labels wrap into them */
  .tv-clus{width:min(52cqw,280px);}
}
.tv-clus h6{
  font-size:clamp(8px,.85cqw,10.5px);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.42);font-weight:400;margin:0 0 3px;
}
.tv-clus div{display:grid;grid-template-columns:1fr minmax(0,1.15fr) auto;align-items:center;gap:clamp(7px,.9cqw,12px);}
.tv-clus span{font-size:clamp(8.5px,.9cqw,11px);letter-spacing:.05em;color:rgba(255,255,255,.66);white-space:nowrap;}
.tv-clus i{
  position:relative;height:3px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden;
}
.tv-clus i::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--pine-lt),var(--brass-lt));
}
.tv-clus b{font-size:clamp(8.5px,.9cqw,11px);font-weight:400;color:var(--brass-lt);min-width:3ch;text-align:right;}
.tv .act.on .tv-clus h6{animation:tvUp .45s .22s var(--ease) both;}
.tv .act.on .tv-clus div{animation:tvUp .45s var(--ease) both;}
.tv .act.on .tv-clus div:nth-of-type(1){animation-delay:.30s;}
.tv .act.on .tv-clus div:nth-of-type(2){animation-delay:.42s;}
.tv .act.on .tv-clus div:nth-of-type(3){animation-delay:.54s;}
.tv .act.on .tv-clus div:nth-of-type(4){animation-delay:.66s;}
.tv .act.on .tv-clus i::after{animation:tvFill .8s var(--ease) forwards;animation-delay:inherit;}
@keyframes tvFill{from{width:0;}to{width:var(--w);}}

/* act 3 — node graph labels */
.tv-net .nl{
  font-family:'DM Mono',monospace;font-size:6.2px;letter-spacing:.14em;text-transform:uppercase;
  fill:rgba(255,255,255,.34);opacity:0;
}
.tv .act.on .tv-net .nl{animation:tvUp .5s .55s var(--ease) both;}

.tv-read{position:absolute;left:clamp(18px,3.4cqw,40px);bottom:clamp(58px,7cqw,86px);z-index:5;display:grid;gap:7px;}
.tv-read span{
  font-size:clamp(9px,.95cqw,12px);color:rgba(255,255,255,.7);letter-spacing:.06em;
  display:flex;gap:10px;align-items:center;
}
.tv-read span::before{content:"▸";color:var(--pine-lt);}
.tv .act.on .tv-read span{animation:tvUp .45s var(--ease) both;}
.tv .act.on .tv-read span:nth-child(1){animation-delay:.3s;}
.tv .act.on .tv-read span:nth-child(2){animation-delay:.55s;}
.tv .act.on .tv-read span:nth-child(3){animation-delay:.8s;}

/* ACT 4 — SOLUTION */
.tv-sol{
  position:absolute;right:clamp(18px,3.4cqw,42px);top:50%;translate:0 -50%;z-index:4;
  display:grid;gap:clamp(8px,1.1cqw,14px);width:min(40cqw,420px);
}
.tv-sol div{
  border:1px solid rgba(255,255,255,.14);border-left:2px solid var(--brass);border-radius:3px;
  background:linear-gradient(90deg,rgba(201,118,47,.13),rgba(255,255,255,.03));
  padding:clamp(8px,1.1cqw,15px) clamp(11px,1.4cqw,18px);
}
.tv-sol strong{display:block;font-family:'Syne',sans-serif;font-size:clamp(11px,1.25cqw,16px);letter-spacing:-.01em;margin-bottom:4px;}
.tv-sol em{font-style:normal;font-size:clamp(8.5px,.9cqw,11px);letter-spacing:.1em;text-transform:uppercase;color:var(--pine-lt);}
.tv .act.on .tv-sol div{animation:tvSlide .55s var(--spring) both;}
.tv .act.on .tv-sol div:nth-child(2){animation-delay:.12s;}
.tv .act.on .tv-sol div:nth-child(3){animation-delay:.24s;}
@keyframes tvSlide{from{opacity:0;transform:translateX(38px);}to{opacity:1;transform:translateX(0);}}
/* act 4 — where the agents land (fills the mid-left gap) */
.tv-dep{
  position:absolute;left:clamp(18px,3.4cqw,40px);top:clamp(104px,15cqw,190px);z-index:5;
  width:min(34cqw,330px);
}
.tv-dep h6{
  font-size:clamp(8px,.85cqw,10.5px);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.42);font-weight:400;margin:0 0 clamp(8px,1cqw,12px);
}
.tv-tags{display:flex;flex-wrap:wrap;gap:clamp(4px,.6cqw,7px);}
.tv-tags span{
  font-size:clamp(8px,.85cqw,10.5px);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.14);border-radius:2px;
  padding:clamp(3px,.45cqw,6px) clamp(6px,.8cqw,10px);background:rgba(255,255,255,.035);
}
.tv-mini{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(6px,.9cqw,12px);
  margin-top:clamp(11px,1.5cqw,20px);padding-top:clamp(10px,1.4cqw,18px);
  border-top:1px solid rgba(255,255,255,.12);
}
.tv-mini b{display:block;font-family:'Syne',sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(13px,1.6cqw,22px);color:var(--brass-lt);}
.tv-mini span{font-size:clamp(7.5px,.8cqw,10px);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);}
.tv .act.on .tv-dep h6{animation:tvUp .45s .18s var(--ease) both;}
.tv .act.on .tv-tags span{animation:tvUp .4s var(--ease) both;}
.tv .act.on .tv-tags span:nth-child(1){animation-delay:.26s;}
.tv .act.on .tv-tags span:nth-child(2){animation-delay:.32s;}
.tv .act.on .tv-tags span:nth-child(3){animation-delay:.38s;}
.tv .act.on .tv-tags span:nth-child(4){animation-delay:.44s;}
.tv .act.on .tv-tags span:nth-child(5){animation-delay:.50s;}
.tv .act.on .tv-tags span:nth-child(6){animation-delay:.56s;}
.tv .act.on .tv-mini div{animation:tvUp .45s var(--ease) both;}
.tv .act.on .tv-mini div:nth-child(1){animation-delay:.62s;}
.tv .act.on .tv-mini div:nth-child(2){animation-delay:.70s;}
/* third line on each agent card: what it is wired between */
.tv-sol u{display:block;text-decoration:none;margin-top:5px;
  font-size:clamp(8px,.82cqw,10px);letter-spacing:.05em;color:rgba(255,255,255,.42);}
/* live dot next to the agent name */
.tv-sol strong::after{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;margin-left:8px;
  background:var(--pine-lt);box-shadow:0 0 9px var(--pine-lt);vertical-align:middle;
}
.tv .act.on .tv-sol strong::after{animation:tvPing 1.8s ease-in-out infinite;}
@keyframes tvPing{0%,100%{opacity:1;}50%{opacity:.28;}}

.tv-wire{position:absolute;inset:0;z-index:2;}
.tv-wire i{position:absolute;left:41%;top:50%;height:1px;background:linear-gradient(90deg,rgba(224,154,78,0),rgba(224,154,78,.6));transform-origin:0 50%;}
.tv .act.on .tv-wire i{animation:tvWire .8s var(--ease) both;}
@keyframes tvWire{from{opacity:0;scale:0 1;}to{opacity:1;scale:1 1;}}

/* ACT 5 — REVENUE */
.tv-rev{
  position:absolute;right:clamp(18px,3.4cqw,42px);top:50%;translate:0 -50%;z-index:4;
  width:min(44cqw,460px);background:rgba(247,245,241,.96);color:var(--ink);
  border-radius:var(--r);padding:clamp(14px,1.9cqw,26px);
  font-family:'Manrope',sans-serif;box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
}
.tv .act.on .tv-rev{animation:tvIn .6s var(--spring) both;}
.tv-rev h5{font-family:'DM Mono',monospace;font-weight:400;font-size:clamp(8.5px,.9cqw,11px);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:clamp(10px,1.3cqw,16px);
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;}
.tv-rev h5 b{font-family:'Syne',sans-serif;font-size:clamp(13px,1.7cqw,22px);letter-spacing:-.02em;color:var(--ink);}
/* revenue bars */
.tv-chart{display:flex;align-items:flex-end;gap:clamp(4px,.7cqw,9px);height:clamp(58px,8cqw,104px);position:relative;}
.tv-chart::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);}
.tv-chart i{
  flex:1;border-radius:2px 2px 0 0;transform-origin:50% 100%;
  background:linear-gradient(180deg,var(--line),var(--plaster-2));
}
.tv-chart i.up{background:linear-gradient(180deg,var(--pine-lt),var(--pine));}
.tv-chart i.now{background:linear-gradient(180deg,var(--brass-lt),var(--brass));}
.tv .act.on .tv-chart i{animation:tvBar .55s var(--spring) both;}
@keyframes tvBar{from{transform:scaleY(.04);opacity:0;}to{transform:scaleY(1);opacity:1;}}
.tv-mark{position:absolute;bottom:0;top:-4px;width:1px;background:repeating-linear-gradient(180deg,var(--brass) 0 4px,transparent 4px 8px);}
.tv-mark span{position:absolute;top:-9px;left:6px;font-family:'DM Mono',monospace;font-size:clamp(7.5px,.75cqw,9.5px);
  letter-spacing:.12em;text-transform:uppercase;color:var(--brass);white-space:nowrap;}
.tv .act.on .tv-mark{animation:tvUp .45s .4s var(--ease) both;}
.tv-axis{display:flex;gap:clamp(4px,.7cqw,9px);margin-top:8px;font-family:'DM Mono',monospace;
  font-size:clamp(7.5px,.75cqw,9.5px);letter-spacing:.1em;color:var(--ink-dim);}
.tv-axis span{flex:1;text-align:center;}
.tv-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:clamp(11px,1.4cqw,18px);padding-top:clamp(11px,1.4cqw,18px);border-top:1px solid var(--line);}
.tv-kpi b{display:block;font-family:'Syne',sans-serif;font-size:clamp(13px,1.7cqw,23px);color:var(--pine);}
.tv-kpi span{font-size:clamp(8px,.85cqw,10.5px);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);}
.tv .act.on .tv-kpi div{animation:tvUp .45s var(--ease) both;}
.tv .act.on .tv-kpi div:nth-child(2){animation-delay:.12s;}
.tv .act.on .tv-kpi div:nth-child(3){animation-delay:.24s;}
.tv-stamp{
  position:absolute;left:14%;top:50%;translate:-50% -50%;z-index:4;
  width:clamp(96px,15cqw,176px);aspect-ratio:1;border-radius:50%;
  border:2px solid var(--pine-lt);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--pine-lt);text-align:center;
}
.tv-stamp svg{width:20%;height:auto;}
.tv-stamp strong{font-family:'Syne',sans-serif;font-size:clamp(20px,3.1cqw,42px);letter-spacing:-.03em;line-height:1;color:#fff;}
.tv-stamp span{font-size:clamp(8px,.85cqw,10.5px);letter-spacing:.2em;text-transform:uppercase;}
.tv .act.on .tv-stamp{animation:tvStamp .55s var(--spring) both;}
@keyframes tvStamp{from{opacity:0;transform:scale(1.7) rotate(-14deg);}to{opacity:1;transform:scale(1) rotate(-8deg);}}

/* — HUD — */
.tv-hud{position:absolute;left:0;right:0;bottom:0;z-index:7;padding:clamp(12px,1.6cqw,22px) clamp(18px,3.4cqw,40px);
  background:linear-gradient(180deg,transparent,rgba(10,11,13,.82));}
.tv-chips{display:flex;gap:clamp(5px,.8cqw,10px);flex-wrap:wrap;margin-bottom:11px;}
.tv-chips button{
  font-family:'DM Mono',monospace;font-size:clamp(8px,.85cqw,10.5px);letter-spacing:.16em;text-transform:uppercase;
  background:none;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.45);
  border-radius:2px;padding:5px clamp(7px,.9cqw,12px);cursor:pointer;transition:color .3s,border-color .3s,background .3s;
}
.tv-chips button:hover{color:#fff;border-color:rgba(255,255,255,.4);}
.tv-chips button.on{color:#17191C;background:var(--brass-lt);border-color:var(--brass-lt);}
.tv-bar{height:2px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden;}
.tv-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pine-lt),var(--brass-lt));}
.tv-toggle{
  position:absolute;right:clamp(18px,3.4cqw,40px);top:clamp(18px,3.6cqw,40px);z-index:8;
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;color:#fff;transition:background .3s,transform .3s var(--spring);
}
.tv-toggle:hover{background:rgba(255,255,255,.22);transform:scale(1.08);}
.tv-toggle svg{width:15px;height:15px;}
/* Paused state — freeze the whole active act (all five of them).

   This has to out-specify the per-act rules above: they set `animation` as a
   shorthand, which resets `animation-play-state` to `running`, and selectors
   like `.tv .act.on .tv-flow b` are more specific than a bare `.tv.hold ...`.
   Hence the wildcard reach plus !important — anything less and the pause
   button visibly does nothing.

   Pausing one-shot entry animations is safe: a finished forwards/both
   animation holds its end state whether running or paused, and an in-flight
   one resumes from where it stopped rather than restarting. */
.tv.hold .act,
.tv.hold .act::before,
.tv.hold .act::after,
.tv.hold .act *,
.tv.hold .act *::before,
.tv.hold .act *::after{animation-play-state:paused !important;}
@container (max-width:640px){
  .tv .cap p{display:none;}
  .tv-read,.tv-src span:nth-child(n+4){display:none;}
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE HARDENING

   The component already sizes itself off its own container (`container-type:
   inline-size` plus cqw throughout), which is why it survives being dropped
   into a 358px column at all. Two things that container could not solve on
   its own:

     · the act chips wrapped to a second and third row on a narrow card, and
       the HUD grew past the fixed height the host page gives the box, so the
       bottom row was clipped. One scrolling row instead of three wrapped ones
     · every HUD control was ~22px tall, which is half a thumb
   ══════════════════════════════════════════════════════════════════════════ */
@container (max-width:520px){
  /* One row that pans, rather than three that wrap. The chips are an index
     of the five acts, so keeping them on a single line also keeps the
     "5 acts" reading intact. */
  .tv-chips{
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    padding-bottom:2px; margin-bottom:9px;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .tv-chips::-webkit-scrollbar{ height:0; }
  .tv-chips button{ flex:0 0 auto; }
  .tv-hud{ padding-bottom:clamp(10px,1.6cqw,16px); }
}

/* Touch: the two things a finger actually aims at. */
@media (pointer:coarse){
  .tv-chips button{ min-height:38px; padding-top:0; padding-bottom:0; }
  .tv-toggle{ width:44px; height:44px; }
}

/* Reduced motion: the host page zeroes every animation-duration, which leaves
   the five acts mid-transition. Keep the act changes instant and legible
   rather than frozen halfway. */
@media (prefers-reduced-motion:reduce){
  .tv .act{ transition:none !important; }
  .tv .act.on .cap i,.tv .act.on .cap b,.tv .act.on .cap p,
  .tv .act.on .tv-src span,.tv .act.on .tv-read span,
  .tv .act.on .tv-sol div,.tv .act.on .tv-kpi div,
  .tv .act.on .tv-tags span,.tv .act.on .tv-clus div{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PORTRAIT LAYOUT — narrow containers

   Every act is composed for a landscape box: a caption top-left and its
   content anchored to the right edge, vertically centred. Dropped into a
   272x505 column on a 320px phone that reads as two things stranded at
   opposite corners with a void between them, the source chips running off
   the right edge, and the caption sliding under the pause button.

   So below 620px of container the composition turns 90 degrees: caption
   across the top, content across the bottom, both full width. Same elements,
   same animations, same reading order - only the axis changes.

   The two "fills the mid-left gap" blocks (.tv-clus, .tv-dep) are switched
   off here. They were added to occupy dead space in a wide box; in a portrait
   one that space does not exist and they are what makes it overflow.
   ══════════════════════════════════════════════════════════════════════════ */
@container (max-width:620px){

  /* — shared furniture — */
  .tv .cap{
    left:16px; right:60px; top:15px;          /* right gap clears the toggle */
  }
  .tv .cap b{ font-size:clamp(17px,5.4cqw,26px); max-width:none; }
  .tv .cap i{ margin-bottom:7px; }
  .tv-toggle{ right:13px; top:13px; width:38px; height:38px; }
  .tv-toggle svg{ width:13px; height:13px; }

  /* Content sits in the band between the caption and the HUD. Stated once
     as a custom property so every act lines up on the same floor. */
  .tv .act{ --tv-floor:74px; }
  .tv-src,.tv-sol,.tv-rev,.tv-net{
    left:16px; right:16px; width:auto; top:auto; bottom:var(--tv-floor);
    translate:none; transform:none;
  }

  /* — decorative gap-fillers, cut — */
  .tv-clus,.tv-dep,.tv-stamp{ display:none; }

  /* — ACT 1: sources — two columns across the floor rather than a right rail.
     The compact rule above this one hides everything from the 4th chip on,
     which leaves an odd 3 in a 2-up grid; the 4th comes back so the grid
     fills, and the 5th stays gone. */
  /* grid-auto-rows:1fr because "INVOICES / PDFS" is the one label that can
     still take two lines at 320px, and a ragged row of chips looks like a
     mistake even when the wrap itself is fine. */
  .tv-src{ display:grid; grid-template-columns:1fr 1fr; gap:6px; grid-auto-rows:1fr; }
  .tv-src span{ justify-content:space-between; gap:6px;
    font-size:8.8px; letter-spacing:.04em; padding:7px 8px; line-height:1.25; }
  .tv-src span:nth-child(4){ display:flex; }
  .tv-src span:nth-child(n+5){ display:none; }

  /* The packets are placed by inline `top` between 22% and 82% of the frame,
     which in portrait runs them under the caption at one end and straight
     through the source chips at the other. Those inline values can't be
     overridden from here - but they are percentages, so shrinking the box
     they resolve against moves all six at once into the clear band between. */
  .tv-flow{ inset:28% 0 auto 0; height:38%; }

  /* — ACT 2: the core is already centred; just size it to the column — */
  .tv-core{ width:min(52cqw,180px); top:50%; }

  /* — ACT 3: readouts under the caption, node graph on the floor. The compact
     rule hides .tv-read; in portrait it is what keeps the middle of the frame
     from being a 200px void, so it comes back and moves to the top. */
  .tv-read{ display:grid; left:16px; right:16px; top:104px; bottom:auto; gap:5px; }
  .tv-read span{ font-size:10px; }
  .tv-net{ aspect-ratio:1.6; height:auto; }
  .tv-net .nl{ font-size:7.4px; }

  /* — ACT 4: agent cards stack full width. The connector wires were drawn from
     a left-hand caption to right-hand cards; with the cards across the floor
     they just cross them diagonally. */
  .tv-wire{ display:none; }
  .tv-sol{ gap:7px; }
  .tv-sol div{ padding:8px 11px; }
  .tv-sol strong{ font-size:12.5px; }
  .tv-sol u{ margin-top:3px; }

  /* — ACT 5: the revenue card takes the floor — */
  .tv-rev{ padding:13px 14px; }
  .tv-rev h5{ margin-bottom:9px; }
  .tv-chart{ height:clamp(46px,13cqw,72px); }
  .tv-kpi{ gap:7px; margin-top:10px; padding-top:10px; }

  /* The packets fly right-to-left across the full width; in a narrow box they
     spend most of the loop half-clipped at the left edge. Shorten the run so
     they fade out inside the frame. */
  @keyframes tvPkt{
    0%{opacity:0;transform:translateX(0) scale(.9);}
    14%{opacity:1;}
    72%{opacity:1;}
    100%{opacity:0;transform:translateX(-58cqw) scale(.74);}
  }
  .tv-flow b{ right:8%; font-size:8.5px; padding:3px 7px; }
}

/* A phone held sideways: the box is wide but short, so the floor comes in and
   the caption's supporting line goes. This is a viewport query, not a
   container one - .tv declares container-type:inline-size, which measures
   width only, so neither cqh nor @container (max-height:) resolves against
   it. Making it container-type:size to gain the block axis would apply size
   containment to a box the host page already gives an explicit height, for
   one rule. Not worth it. */
@media (orientation:landscape) and (max-height:560px){
  .tv .act{ --tv-floor:64px; }
  .tv .cap p{ display:none; }
}

/* The portrait block above shrinks .tv-toggle to 38px to clear the caption,
   and because it comes later in this file it was beating the coarse-pointer
   rule that sizes it for a thumb. Restated here, last, so touch wins: 44px,
   and the caption's right gutter widens to match. */
@media (pointer:coarse){
  .tv-toggle{ width:44px; height:44px; }
  @container (max-width:620px){
    .tv-toggle{ width:44px; height:44px; right:12px; top:12px; }
    .tv .cap{ right:66px; }
  }
}